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)

Bùi Văn Mạnh [T2008A]
Bùi Văn Mạnh

2020-10-25 10:39:13


#bai2.html


<!DOCTYPE html>
<html>
<head>
	<title>Register.html</title>
	<meta charset="utf-8">
	<style type="text/css">
	
	</style>
</head>
<body>
	 <form method="post" onsubmit="return saveData()">
		<p>
			<label>Fullname:</label>
			<input required type="text" name="name" size="50" placeholder="Enter full name" maxlength="50" id="fullname_from">
		</p>
		<p>
			<label>Age:</label>
			<input required type="number" name="age" size="50" placeholder="Enter age" min="0" max="100" id="age_from">
		</p>	
		<p>
			<label>Email:</label>
			<input required type="email" name="email" size="50" placeholder="Enter email" id="email_from">
		</p>
		<button>Save</button>
		<button type="button" onclick="readData()">Read</button>
	 </form>

	 <script type="text/javascript">
	 	function saveData(){
	 		fullname = document.getElementById('fullname_from').value;
	 		email = document.getElementById('email_from').value;
	 		age = document.getElementById('age_from').value;

	 		console.log(fullname)
	 		console.log(email)
	 		console.log(age)
           
	 		localStorage.setItem('fullname_db',fullname)
	 		localStorage.setItem('age_db',age)
	 		localStorage.setItem('email_db',email)

	 		return true;
	 	}
      
		function readData() {
			fullname = localStorage.getItem('fullname_db')
			email = localStorage.getItem('email_db')
			age = localStorage.getItem('age_db')

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

			document.getElementById('fullname_from').value = fullname
			document.getElementById('email_from').value = email
			document.getElementById('age_from').value = age

			document.getElementById('result').innerHTML += `<tr>
					<td>${fullname}</td>
					<td>${age}</td>
					<td>${email}</td>
				</tr>`

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


hainguyen [T2008A]
hainguyen

2020-10-25 09:53:31


#register.html


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<div>
		<form method="post" onsubmit="return save()">
			<p>
				<label>Ten:</label>
				<input required type="text" name="ten" id="ten_form">
			</p>
			<p>
				<label>Tuoi:</label>
				<input type="number" name="tuoi" id="tuoi_form" required>
			</p>
			<p>
				<label>Email:</label>
				<input type="email" name="email" id="email_form" required>
			</p>
			<p>
				<button>Submit</button>
			</p>
		</form>
		<br/>
		<br/>

		<div id="link">
		</div>
	</div>

	<script type="text/javascript">
		function save(){
			ten = document.getElementById('ten_form').value
			tuoi = document.getElementById('tuoi_form').value
			email = document.getElementById('email_form').value

			localStorage.setItem('ten_db', ten)
			localStorage.setItem('tuoi_db', tuoi)
			localStorage.setItem('email_db', email)

			document.getElementById('ten_form').value
			document.getElementById('tuoi_form').value
			document.getElementById('email_form').value
			document.getElementById('link'). innerHTML =`<a href="show.html">Chuyển trang</a>`

			return false
		}
	</script>
</body>
</html>


Nguyễn Xuân Mai [T2008A]
Nguyễn Xuân Mai

2020-10-24 04:06:47

Register.html


<!DOCTYPE html>
<html>
<head>
	<title>register</title>
</head>
<body>
	<form method="post">
		<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>Email: </label>
			<input required type="email" name="email" size="50" placeholder="Enter email" id="email_form">
		</p>
		<p>
			<label>Age: </label>
			<input required type="number" name="age" size="50" placeholder="Enter age" id="age_form">
		</p>
		<button onclick="saveData()">Sign up</button>
		<button type="button"><a href="show.html">Show Data</a></button>
	</form>

	<script type="text/javascript">
		function saveData(){
			fullname = document.getElementById('fullname_form').value
			email = document.getElementById('email_form').value
			age = document.getElementById('age_form').value

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

			localStorage.setItem('fullname_db', fullname)
			localStorage.setItem('email_db', email)
			localStorage.setItem('age_db', age)
			return true;
		}
	</script>
</body>
</html>


Nguyễn Xuân Mai [T2008A]
Nguyễn Xuân Mai

2020-10-24 04:06:21

Show.html


<!DOCTYPE html>
<html>
<head>
	<title>show</title>
</head>
<body>
	<form method="post">
		<p>
			<label hidden="true">Fullname: </label>
			<input hidden="true" 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 hidden="true">Email: </label>
			<input hidden="true" required type="email" name="email" size="50" placeholder="Enter email" id="email_form">
		</p>
		<p>
			<label hidden="true">Age: </label>
			<input hidden="true" required type="number" name="age" size="50" placeholder="Enter age" id="age_form">
		</p>
		<button><a href="register.html">Back</a></button>
		<button type="button" onclick="readData()">Read Data</a></button>
	</form>

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

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

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

			document.write('Fullname: ' + fullname + '</br>')
			document.write('Email: ' + email + '</br>')
			document.write('Age: ' + age + '</br>')
		}
	</script>
</body>
</html>


nguyễn Sử [T2008A]
nguyễn Sử

2020-10-23 14:48:36


#show.html


<!DOCTYPE html>
<html>
<head>
	<title>show</title>
	<meta charset="utf-8">
</head>
<body>
	<div>
		<form method="post" onsubmit="return save()">
			<p>
				<label> Tên: </label>
				<input required type="text" name="tên" id="tên_form">
			</p>
			<p>
				<label> Tuổi: </label>
				<input required type="number" name="tuổi" id="tuổi_form">
			</p>
			<p>
				<label> email: </label>
				<input required type="email" name="email" id="email_form">
			</p>
			<button type="button" onclick="save()">Show</button>
		</form>
	</div>
<script type="text/javascript">
	function save(){
		ten = localStorage.getItem('tên_db')
		tuoi = localStorage.getItem('tuoi_db')
		email = localStorage.getItem('email_db')

		console.log(ten)
		console.log(tuoi)
		console.log(email)

		document.getElementById('tên_form').value = ten
		document.getElementById('tuổi_form').value = tuoi
		document.getElementById('email_form').value = email

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


nguyễn Sử [T2008A]
nguyễn Sử

2020-10-23 14:48:12


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>quản lý đăng ký đăng nhập</title>
	<meta charset="utf-8">
</head>
<body>
	<div>
		<form method="post" onsubmit="return save()">
			<p>
				<label> Tên: </label>
				<input required type="text" name="tên" id="tên_form">
			</p>
			<p>
				<label> Tuổi: </label>
				<input required type="number" name="tuổi" id="tuổi_form">
			</p>
			<p>
				<label> email: </label>
				<input required type="email" name="email" id="email_form">
			</p>
			<button type="button" onclick="save()">Đăng ký</button>
		</form>
	</div>
	<script type="text/javascript">
		function save(){
			ten = document.getElementById('tên_form').value
			tuoi = document.getElementById('tuổi_form').value
			Email = document.getElementById('email_form').value

			console.log(ten)
			console.log(tuoi)
			console.log(Email)

			//Save => localstorage
			localStorage.setItem('tên_db', ten)
			localStorage.setItem('tuổi_db', tuoi)
			localStorage.setItem('email_db', Email)

				return false;
			}
			
	</script>
</body>
</html>


Nguyễn Tiến Đạt [T2008A]
Nguyễn Tiến Đạt

2020-10-23 13:44:51


#register.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>
<body>
    <div>
        <form  onsubmit="return saveData()">
            <p>
                <label>Full Name:</label>
                <input type="text" id="fullname_form" required>
            </p>
            <p>
                <label>Age:</label>
                <input type="number" min="0" max="100" id="age_form" required>
            </p>
            <p>
                <label>Email:</label>
                <input type="email" id="email_form" required>
            </p>
            <button>Submit</button>
        </form>
        <br>
        <br>
        <div id="link">

        </div>
    </div>
    <script>
        function saveData() {
            fullname = document.getElementById('fullname_form').value
			email = document.getElementById('email_form').value
			age = document.getElementById('age_form').value
            localStorage.setItem('fullname_db',fullname)
            localStorage.setItem('email_db',email)
            localStorage.setItem('age_db',age)
            document.getElementById('fullname_form').value=''
            document.getElementById('email_form').value=''
            document.getElementById('age_form').value=''
            document.getElementById('link').innerHTML=`<a href="show.html">Chuyển trang để xem thông tin đã nhập</a>`
            return false
        }
    </script>
</body>
</html>


#show.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Information</title>
</head>
<body>
    <button onclick="ShowInfor()">Show Information</button>
    <div id="show"></div>
        <script>
            function ShowInfor() {
                document.getElementById('show').innerHTML=`
                <form>
                    <p>
                        <label>Full Name:</label>
                        <input type="text" id="fullname_form" disabled>
                    </p>
                    <p>
                        <label>Age:</label>
                        <input type="number" id="age_form" disabled>
                    </p>
                    <p>
                        <label>Email:</label>
                        <input type="email" id="email_form" disabled>
                    </p>
                </form>
                `
                document.getElementById('fullname_form').value=localStorage.getItem('fullname_db')
                document.getElementById('age_form').value=localStorage.getItem('age_db')
                document.getElementById('email_form').value=localStorage.getItem('email_db')
            }
        </script>
</body>
</html>


vuong huu phu [T2008A]
vuong huu phu

2020-10-23 13:03:46

bai2


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div>
		<form>
<p>
			<label>Họ và tên:</label>
			<input required type="text" name="name1" id="name">
</p>
<p>
			<label>Tuổi:</label>
			<input required type="number" name="age1" id="age">
</p>
<p>
			<label>Email:</label>
			<input required type="Email" name="Email1" id="Email">
</p>
<p>
			<button type="button" onclick="read()">Show</button>
</p>			
		</form>
	</div>

<script type="text/javascript">
function read() {
	name2 =localStorage.getItem('name_dt')
	age2 = localStorage.getItem('age_dt')
	Email2 = localStorage.getItem('email_dt')

	console.log (name2)
	console.log (age2)
	console.log (Email2)

	document.getElementById('name').value = name2

	document.getElementById('age').value = age2

	document.getElementById('Email').value = Email2

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


vuong huu phu [T2008A]
vuong huu phu

2020-10-23 13:02:31


bai1
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>
		<form method="post" onsubmit="return save()">
<p>
			<label>Họ và tên:</label>
			<input required type="text" name="name1" id="name">
</p>
<p>
			<label>Tuổi:</label>
			<input required type="number" name="age1" id="age">
</p>
<p>
			<label>Email:</label>
			<input required type="Email" name="Email1" id="Email">
</p>
<p>
			<button>Đăng kí</button>
</p>			
		</form>
	</div>



<script type="text/javascript">
	function save() {
	name2 = document.getElementById('name').value
	age2 = document.getElementById('age').value
	Email2 = document.getElementById('Email').value

	console.log (name2)
	console.log (age2)
	console.log (Email2)

	localStorage.setItem('name_dt',name2)
	localStorage.setItem('age_dt',age2)
	localStorage.setItem('email_dt',Email2)

	return false; 

}

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


Nguyên Phấn Đông [T2008A]
Nguyên Phấn Đông

2020-10-23 10:47:53


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>Đăng Ký</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin-left: 30%;
			float: left;
		}
		fieldset{width: 50px;}
       .capction{
       	background-color: #4267b2; 
       	color: white;
       }
       .panel{
       	position: relative;
        display: inline-block;
       }
       .dropdown-content {
  display: none;
    position: absolute;
    background-color: #cfc;
	
	color: #303030;
	border: 2px solid black;
}
.show {display:block;}
	</style>
</head>
<body>
  <form method="post" onsubmit="return saveData()">
  	<fieldset>
  		<legend>Đơn Đăng Ký</legend>
  	<table >
  		<tr>
  			<td><label>Tên:</label></td>
  			<input type="number" name="index" id="index" value="" hidden="true">
  			<td><input type="text" name="name" id="fullname_form" required></td>
  		</tr>
  		<tr>
  			<td><label>Tuổi:</label></td>
  			<td><input required type="number" name="age" size="50" min="0" max="100" id="age_form"></td>
  		</tr>
  		<tr>
  			<td><label>Email:</label></td>
  			<td><input type="Email" name="email" id="email_form" required></td>
  		</tr>
  	</table>

  	<button onclick="addProduct()">Save</button>
  	<button type="button" onclick="readData()">Read</button>
  	<button id="myBtn" type="button" class="dropbtn">Show</button>
  	</fieldset>
  </form>
  <div class="panel" style="margin-top: 20px;">
		<div id="myDropdown" class="dropdown-content">
			<table class="table" border="1">
				<caption class="capction">Thông Tin Đăng Ký</caption>
				<thead>
					<tr>
					
						<th width="5px">Tên</th>
						<th>Tuổi</th>
						<th>Email</th>
					
				</thead>
				<tbody id="result">
				</tbody>
			</table>
		</div>
	</div>

  <script type="text/javascript">
		function saveData() {
			fullname = document.getElementById('fullname_form').value
			email = document.getElementById('email_form').value
			age = document.getElementById('age_form').value
			
			console.log(fullname)
			console.log(email)
			console.log(age)

	
			localStorage.setItem('fullname_db', fullname)
			localStorage.setItem('email_db', email)
			localStorage.setItem('age_db', age)

			return true;
		}

		function readData() {
			fullname = localStorage.getItem('fullname_db')
			email = localStorage.getItem('email_db')
			age = localStorage.getItem('age_db')

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

			// document.getElementById('fullname_form').value = fullname
			// document.getElementById('email_form').value = email
			// document.getElementById('age_form').value = age
			document.getElementById('result').innerHTML += `<tr>
					<td>${fullname}</td>
					<td>${age}</td>
					<td>${email}</td>
				</tr>`
		}

            document.getElementById("myBtn").onclick = function() {
            	myFunction()
            };
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

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


Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó