By GokiSoft.com| 20:05 22/02/2022|
Học JS

LocalStorage: Quản lý đăng ký đăng nhập- Lập trình Javascript

1. Tạo ra 1 trang web đặt tên là : register.html gồm các input (tên, tuổi, email) và button đăng ký

Khi ngươi dùng click vào button đăng ký thì lưu toàn bộ thông tin vào LocalStorage

2. Tạo ra 1 trang web mới là : show.html -> Lấy thông tin luu trong LocalStorage và hiển thị ra màn hình


Tags:

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Trần Thị Khánh Huyền [T2008A]
Trần Thị Khánh Huyền

2020-10-23 10:07:30


#show.html


<!DOCTYPE html>
<html>
<head>
	<title>hien thi</title>
	<meta charset="utf-8">
</head>
<body>
	<form method="post" onsubmit="return saveData()">
		<p>
			<label>Name:</label>
			<input required type="text" name="fullname"id="fullname_form">
		</p>
		<p>
			<label>Age:</label>
			<input required type="number" name="age"id="age_form">
		</p>
		<p>
			<label>Email:</label>
			<input required type="email" name="email"id="email_form">
		</p>
		<button type="button" onclick="readData()">Read</button>
	</form>

<script type="text/javascript">
	function readData(){
		fullname=localStorage.getItem("fullname_db")
		age=localStorage.getItem("age_db")
		email=localStorage.getItem("email_db")

		console.log(fullname)
		console.log(age)
		console.log(email)

		document.getElementById("fullname_form").value=fullname
		document.getElementById("age_form").value=age
		document.getElementById("email_form").value=email

	}

</script>

</body>
</html>


Trần Thị Khánh Huyền [T2008A]
Trần Thị Khánh Huyền

2020-10-23 10:07:10


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>register</title>
	<meta charset="utf-8">
</head>
<body>
	<form method="post" onsubmit="return saveData()">
		<p>
			<label>Name:</label>
			<input required type="text" name="fullname"id="fullname_form">
		</p>
		<p>
			<label>Age:</label>
			<input required type="number" name="age"id="age_form">
		</p>
		<p>
			<label>Email:</label>
			<input required type="email" name="email"id="email_form">
		</p>
		<button>Đăng ký</button>
	</form>
<script type="text/javascript">
	function saveData(){
		fullname= document.getElementById("fullname_form").value
		age= document.getElementById("age_form").value
		email=document.getElementById("email_form").value
		console.log(fullname)
		console.log(age)
		console.log(email)
	
	localStorage.setItem("fullname_db", fullname)
	localStorage.setItem("age_db",age)
	localStorage.setItem("email_db",email)

	return true;}


</script>
</body>
</html>


Nguyễn Hữu Hiếu [T2008A]
Nguyễn Hữu Hiếu

2020-10-23 10:03:01


#2030.html


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form>
		<p>
			<label>Fullname: </label>
			<input required type="text" name="fullname" size="50" placeholder="Enter full name" maxlength="50" pattern="[a-z0-9A-Z ]{5,50}" id="fullname_form">
		</p>
		<p>
			<label>Age:</label>
			<input required type="number" name="age" size="50" placeholder="Enter age" min="0" max="100" id="age_form">
		</p>
		<p>
			<label>Address: </label>
			<input required type="text" name="address" size="50" placeholder="Enter address" id="address_form">
		</p>
		
		
		<button type="button" onclick="saveData()">Dang Ky</button>
		<a href="show.html" target="_blank"><button type="button" onclick="showData()">Hien Thi</button></a>
		
	</form>
	<script type="text/javascript">
		function saveData() {
			fullname = document.getElementById('fullname_form').value
			age = document.getElementById('age_form').value
			address = document.getElementById('address_form').value
			
			console.log(fullname)
			console.log(age)
			console.log(address)

			localStorage.setItem('fullname_db', fullname)
			localStorage.setItem('age_db', age)
			localStorage.setItem('address_db', address)			
			
			return true;
		}

		function showData() {
			fullname = localStorage.getItem('fullname_db')
			age = localStorage.getItem('age_db')
			address = localStorage.getItem('address_db')

			document.getElementById('fullname_form').value = fullname
			document.getElementById('age_form').value = age
			document.getElementById('address_form').value = address

		}
		
		
		





	</script>

</body>
</html>


#show.html


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form>
		<p>
			<label>Fullname: </label>
			<input required type="text" name="fullname" size="50" placeholder="Enter full name" maxlength="50" pattern="[a-z0-9A-Z ]{5,50}" id="fullname_form">
		</p>
		<p>
			<label>Age:</label>
			<input required type="number" name="age" size="50" placeholder="Enter age" min="0" max="100" id="age_form">
		</p>
		<p>
			<label>Address: </label>
			<input required type="text" name="address" size="50" placeholder="Enter address" id="address_form">
		</p>
		
		
		<button type="button" onclick="saveData()">Dang Ky</button>
		<a href="show.html"><button type="button" onclick="showData()">Hien Thi</button></a>
		
	</form>
	<script type="text/javascript">
		showData();
		function showData() {
			fullname = localStorage.getItem('fullname_db')
			age = localStorage.getItem('age_db')
			address = localStorage.getItem('address_db')

			document.getElementById('fullname_form').value = fullname
			document.getElementById('age_form').value = age
			document.getElementById('address_form').value = address

		}
		
		
		





	</script>

</body>
</html>