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 VĂN ĐIỆP [Teacher]
TRẦN VĂN ĐIỆP

2021-03-04 12:13:52


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>Register Form - Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="register.js"></script>
</head>
<body>
	<div class="container">
		<form method="post" onsubmit="return registerNewUser();">
			<div class="form-group">
				<label>Full Name: <font color="red">*</font></label>
				<input required="true" type="text" name="fullname" id="fname" class="form-control" placeholder="Enter full name" pattern="[a-zA-Z0-9 ]{6,}">
			</div>
			<div class="form-group">
				<label>Email: <font color="red">*</font></label>
				<input required="true" type="email" name="email" id="email" class="form-control" placeholder="Enter email">
			</div>
			<div class="form-group">
				<label>Password: <font color="red">*</font></label>
				<input required="true" type="password" name="pwd" id="password" class="form-control" placeholder="Enter pwd" minlength="6">
			</div>
			<div class="form-group">
				<label>Confirmation Password: <font color="red">*</font></label>
				<input required="true" type="password" name="pwd-confirm" id="password-confirmation" class="form-control" placeholder="Enter Confirmation Pwd" minlength="6">
			</div>
			<div class="form-group">
				<label>Birthday: </label>
				<input type="date" name="bod" id="birthday" class="form-control">
			</div>
			<div class="form-group">
				<label></label>
				<button type="submit">Register</button>
				<button type="reset" class="btn-reset">Reset</button>
			</div>
		</form>
	</div>
</body>
</html>


#register.js


function registerNewUser() {
	console.log('test....')
	var fname = document.getElementById('fname').value
	var email = document.getElementById('email').value
	var password = document.getElementById('password').value
	var confirmPwd = document.getElementById('password-confirmation').value
	var birthday = document.getElementById('birthday').value

	if(password != confirmPwd) {
		alert('Mat khau nhap khong khop!!! Vui long kiem tra lai!!!')
		return false;
	}

	localStorage.setItem('fullname', fname)
	localStorage.setItem('email', email)
	localStorage.setItem('password', password)
	localStorage.setItem('birthday', birthday)

	return true;
}


#show.html


<!DOCTYPE html>
<html>
<head>
	<title>Register Form - Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="show.js"></script>
</head>
<body onload="init()">
	<div class="container">
		<div class="form-group">
			<span style="font-weight: bold;" id="fullname">Full Name: </span>
			<!-- <label id="fullname"></label> -->
		</div>
		<div class="form-group">
			<span style="font-weight: bold;" id="email">Email: </span>
			<!-- <label id="email"></label> -->
		</div>
		<div class="form-group">
			<span style="font-weight: bold;" id="birthday">Birthday: </span>
			<!-- <label id="birthday"></label> -->
		</div>
	</div>
</body>
</html>


#show.js


function init() {
	var fname = localStorage.getItem('fullname')
	var email = localStorage.getItem('email')
	var birthday = localStorage.getItem('birthday')

	document.getElementById('fullname').innerHTML += fname
	document.getElementById('email').innerHTML += email
	document.getElementById('birthday').innerHTML += birthday
}


#style.css


.container {
	width: 480px;
	background-color: #7dd1e8;
	margin: 0px auto;
	padding: 10px;
}

.form-group {
	display: flex;
	margin-bottom: 5px;
}

.form-group label {
	width: 40%;
	float: left;
	text-align: right;
	padding-right: 15px;
}

.form-group input {
	width: 60%;
	float: left;
}

.form-group button {
	width: 30%;
	margin-left: 0px;
	background-color: orange;
	border: none;
	padding: 8px;
}

.btn-reset {
	background-color: #e34516 !important;
}


Vũ Ngọc Văn [community,C2010L]
Vũ Ngọc Văn

2021-03-02 14:40:07

https://vungocvan-aptech.herokuapp.com/0302/register.html

https://github.com/vanvu25894/02-HTML/tree/main/0302


Đào Mạnh Dũng [C2010L]
Đào Mạnh Dũng

2021-03-02 14:33:53



<!DOCTYPE html>
<html>
<head>
	<title>login</title>
	<meta charset="utf-8">
	<style type="text/css">
		.block{

			margin-top: 60px;
			margin-left: 30%;
			border: 2px;
			background-color: #EEEEEE;
			width: 30%;

		}
		h3{

				margin-top: 10px;
				margin-left: 10px;
				
		}
		.button {
				margin-top: 10px;
				margin-left: 80px;
				margin-bottom:50px;
		}
	</style>
</head>
<body>

		<div class="block">
			<h3>
				nhập tên : <input type="text" id="name">
			</h3>
			<h3>
				nhập tuổi : <input type="number" id="age">
			</h3>
			<h3>
				nhập nhập email : <input type="email" id="email">
			</h3>
				<div class="button">
					<button onclick="save()">Đăng ký</button>
				</div>

		</div>

<script type="text/javascript">
	

			function save() {
				var name=document.getElementById('name').value
				var age=document.getElementById('age').value
				var email=document.getElementById('email').value
				var data = {
					"ten" : name,
					"tuoi" : age,
					"gmail" : email
				}
				var json1 = JSON.stringify(data)
				console.log(json1)
				localStorage.setItem('datajson',json1)
			}


</script>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
	<title>login</title>
	<meta charset="utf-8">
	<style type="text/css">
		.block{

			margin-top: 60px;
			margin-left: 30%;
			border: 2px;
			background-color: #EEEEEE;
			width: 30%;

		}
		h3{

				margin-top: 10px;
				margin-left: 10px;
				
		}
		 
	</style>
</head>
<body>

		<div class="block">
			<h3 id="name">
				 
			</h3>
			<h3 id="age">
				 
			</h3>
			<h3 id="email">
				 
			</h3>
		</div>

<script type="text/javascript">
	

			var dataj= localStorage.getItem('datajson')
			var stddata=JSON.parse(dataj)
			console.log(stddata)

				document.getElementById('name').innerHTML=stddata.ten
				document.getElementById('age').innerHTML=stddata.tuoi
				document.getElementById('email').innerHTML=stddata.gmail

</script>

</body>
</html>


Nguyễn Trần Tuân [community,C2010L]
Nguyễn Trần Tuân

2021-03-02 14:00:47


#27.2.2021.html


<!DOCTYPE html>
<html>
<head>
	<title>Quản Lý Form Payment - Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="panel">
		<div class="panel-heading">
			Purchase Order Form
		</div>
		<div class="panel-body">
			<form>
			<div>
				<fieldset>
					<legend>Product Information</legend>
					<div >
						<table border="1" cellpadding="2" style="border-color: blue ">
							<tr>
								<th>Product:</th>
								<td>
									<select required="true" id="product" onchange="addUnitPrice()">
									<option value="">Select</option>
									<option value="650">Comfort Sleeper</option>
									<option value="975">Morgan Kids Bed</option>
									<option value="480">Entertainment Cabinet</option>
									</select>
								</td>
							</tr>
							<tr>
								<th>Unit Price ($):</th>
								<td><input required="true" type="number" id="unit_price" disabled="true" value="0" style="width: 45px" class="focus"></td>
							</tr>
							<tr>
								<th>Quantity:</th>
								<td><input type="number" id="quantity" disabled="true" value="0" onkeyup="updateQuantity()" style="width: 45px" class="focus"></td>
							</tr>
							<tr>
								<th>Total Price ($):</th>
								<td><input type="number" id="total_price" disabled="true" value="0" style="width: 45px" class="focus"></td>
							</tr>
						</table>
					</div>
				</fieldset>
				
				
			</div>
			<div>
				<fieldset>
					<legend>Shipping Information</legend>
					<div>
						<table border="1" cellpadding="2" style="border-color: blue ">
							<tr>
								<th>Full Name:</th>
								<td>
									<input type="text" id="full_name" class="focus">
								</td>
							</tr>
							<tr>
								<th>Shipping Address:</th>
								<td><input type="text" id="shipping_address" class="focus"></td>
							</tr>
							<tr>
								<th>Credit Card:</th>
								<td>
									<select required="true" id="credit_card" onchange="selectCreditCard()">
										<option value="">Select</option>
										<option value="650">VISA</option>
										<option value="975">Master Card</option>
										<option value="480">American Express</option>
									</select>
								</td>
							</tr>
							<tr>
								<th>Credit Card Number:</th>
								<td>
									<input type="number" id="ccn_1" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_2" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_3" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_4" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
								</td>
							</tr>
						</table>
					</div>
				</fieldset>
				<fieldset class="form">
					<button type="Submit">Submit</button>
					<button type="Reset">Reset</button>
				</fieldset>
				
			</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="27.2.2021.js"></script>
</body>
</html>


#27.2.2021.js


function addUnitPrice(){
	var productTag = document.getElementById('product')
	var productValue = productTag.value
	var unitPrice = document.getElementById('unit_price')

	if(productValue != ''){
		unitPrice.value = productValue
		document.getElementById('quantity').disabled = false
	}
	else{
		unitPrice.value = '0'
		document.getElementById('quantity').disabled = true
	}
}
function updateQuantity(){
	quantityValue = document.getElementById('quantity').value
	unitPrice = document.getElementById('unit_price').value
	document.getElementById('total_price').value = quantityValue * unitPrice
}
function selectCreditCard(){
	var creditcard = document.getElementById('credit_card').value
	if(creditcard != ''){
		document.getElementById('ccn_1').disabled = false
		document.getElementById('ccn_2').disabled = false
		document.getElementById('ccn_3').disabled = false
		document.getElementById('ccn_4').disabled = false
	}else {
		document.getElementById('ccn_1').disabled = true
		document.getElementById('ccn_2').disabled = true
		document.getElementById('ccn_3').disabled = true
		document.getElementById('ccn_4').disabled = true
	}
}


#style.css


.panel {
	width: 500px;
	border: solid 1px grey;
	padding: 5px;
	background-color: #a8e8f1;
}
.panel-heading {
	border: solid 1px grey;
	width: 300px;
	padding: 5px;
	background-color: #4eaec1;
	font-size: 30px;

}
.focus:focus{
	background-color: yellow;
}
.form button {
	margin: 0 auto;
}
fieldset {
	margin: 8px;
	margin-left: 2px;
	border: solid 1px silver;
	border-radius: 4px;
	padding: 8px; 
}
legend {
	padding: 2px;
}
th {
	background-color: #e4e4ef;
	width: 150px;
	text-align: left;
}
td {
	background-color: #e4e4ef;
	width: 250px;
}


Vũ Trung Kiên [C2009I]
Vũ Trung Kiên

2020-12-28 14:19:53


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>Local Storage</title>
	<meta charset="utf-8">
	<style type="text/css">
		.FlexBlock
		{
			display: flex;
		}
		.TextSection
		{
			line-height: 25px;
			text-align: right;
			margin-left: 10px;
		}
		.InputSection
		{
			line-height: 25px;
			margin-left: 20px;
		}
		input
		{
			outline: none;
		}
		.ShowData
		{
			margin-left: 73px;
			margin-top: 3px;
		}
	</style>
</head>
<body>
	<div class="FlexBlock">
		<div class="TextSection">
			Tên: 
			<br/>
			Tuổi: 
			<br/>
			Email: 
		</div>
		<div class="InputSection">
			<form method="post">
				<input required type="text" name="Name" id="NameId">
				<br/>
				<input required type="number" name="Age" id="AgeId">
				<br/>
				<input required type="email" name="Email" id="EmailId">
				<br/>
				<input type="submit" name="Submit" value="Đăng ký" onclick="Save()">
			</form>
		</div>
	</div>
	<a href="show.html">
		<button class="ShowData">Show Data</button>
	</a>
	<script type="text/javascript">
		function Save()
		{
			name = document.getElementById('NameId').value
			age = document.getElementById('AgeId').value
			email = document.getElementById('EmailId').value
			localStorage.setItem('nameLS', name)
			localStorage.setItem('ageLS', age)
			localStorage.setItem('emailLS', email)
		}
	</script>
</body>
</html>


#show.html


<!DOCTYPE html>
<html>
<head>
	<title>Local Storage</title>
	<meta charset="utf-8">
	<style type="text/css">
		.FlexBlock
		{
			display: flex;
		}
		.TextSection
		{
			line-height: 25px;
			text-align: right;
			margin-left: 10px;
		}
		.InputSection
		{
			line-height: 25px;
			margin-left: 20px;
		}
		input
		{
			outline: none;
		}
		.Back
		{
			margin-left: 73px;
			margin-top: 3px;
		}
	</style>
</head>
<body>
	<div class="FlexBlock">
		<div class="TextSection">
			Tên: 
			<br/>
			Tuổi: 
			<br/>
			Email: 
		</div>
		<div class="InputSection">
			<form method="post">
				<input required type="text" name="Name" id="NameId" disabled>
				<br/>
				<input required type="number" name="Age"id="AgeId"  disabled>
				<br/>
				<input required type="email" name="Email" id="EmailId" disabled>
			</form>
		</div>
	</div>
	<a href="register.html">
		<button class="Back">Back</button>
	</a>
	<script type="text/javascript">
		document.getElementById('NameId').value = localStorage.getItem('nameLS')
		document.getElementById('AgeId').value = localStorage.getItem('ageLS')
		document.getElementById('EmailId').value = localStorage.getItem('emailLS')
	</script>
</body>
</html>


Nguyễn Anh Vũ [T2008A]
Nguyễn Anh Vũ

2020-11-04 06:44:58


#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>


Triệu Văn Lăng [T2008A]
Triệu Văn Lăng

2020-10-31 06:18:04


#show.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show</title>
</head>
<body>
    <button onclick="ShowInfor()">Show Information</button>
    <div id="show"></div>
        <script>
            function ShowInfor() {
                document.getElementById('show').innerHTML=`
                <form>
                    <p>
                        <label>Tên</label>
                        <input type="text" id="name" disabled>
                    </p>
                    <p>
                        <label>Tuổi:</label>
                        <input type="number" id="age" disabled>
                    </p>
                    <p>
                        <label>Email:</label>
                        <input type="email" id="email" disabled>
                    </p>
                </form>
                `
                document.getElementById('name').value=localStorage.getItem('name_db')
                document.getElementById('age').value=localStorage.getItem('age_db')
                document.getElementById('email').value=localStorage.getItem('email_db')
            }
        </script>
</body>
</html>


Triệu Văn Lăng [T2008A]
Triệu Văn Lăng

2020-10-31 06:17:50


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>Register</title>
	<meta charset="utf-8">
</head>
<body>
	<form onsubmit="return saveInfor()">
		<div>
			<label>Tên</label>
			<input type="text" name="name" placeholder="Nhập Tên" id="name"  required >
		</div>
		<div>
			<label>Tuổi</label>
			<input type="number" name="age" placeholder="Nhập Tuổi" min="1" max="100" id="age" required>
		</div>
		<div>
			<label>Email</label>
			<input type="email" name="mail" placeholder="Nhập Email" id="email" required>
		</div>
		<div>
			<button >Register</button>
			
		</div>
	</form>
	<br><br>
	<div id="link"></div>
	 <script>
        function saveInfor() {
            fullname = document.getElementById('name').value
			email = document.getElementById('email').value
			age = document.getElementById('age').value
            localStorage.setItem('name_db',fullname)
            localStorage.setItem('email_db',email)
            localStorage.setItem('age_db',age)
            document.getElementById('name').value=''
            document.getElementById('email').value=''
            document.getElementById('age').value=''
            document.getElementById('link').innerHTML=`<a href="show.html">Xem thông tin</a>`
            return false
        }
    </script>
</body>
</html>


Do Trung Duc [T2008A]
Do Trung Duc

2020-10-26 02:40:16



<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		input{
			margin-top: 10px;
			width: 20%;
		}
		button{
			margin-top: 10px;
		}


	</style>
</head>
<body>
<form method="post" onsubmit="return saveData()">
<div style="padding: 10px;">
	<div>
		<label>Full Name</label>
		<input placeholder="Enter your name..."  required type="text" name="name" id="name" pattern="[a-zA-Z]{1,100}">
	</div>

	<div>
	<label>Age</label>
	<input placeholder="Enter your age..."  required  type="number" name="age" id="age" pattern="[0-9]{,2}" min="1" max ="100">
	</div>

	<div>
	<label>Email</label>
	<input placeholder="Enter your email..."  required type="email" name="email" id="email">
	</div>

	<div>
	<button type="button" onclick="displayData()">Hienthi</button>
	</div>
</div>
</form>

<script type="text/javascript">

		function displayData(){
		fullname = localStorage.getItem('fullname')
		age = localStorage.getItem('age')
		email = localStorage.getItem('email')

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

		document.getElementById('name').value = fullname
		document.getElementById('age').value  = age
		document.getElementById('email').value  = email
	}

</script>

</body>
</html>


Do Trung Duc [T2008A]
Do Trung Duc

2020-10-26 02:39:50



<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		input{
			margin-top: 10px;
			width: 20%;
		}
		button{
			margin-top: 10px;
		}


	</style>
</head>
<body>
<form method="post" onsubmit="return saveData()">
<div style="padding: 10px;">
	<div>
		<label>Full Name</label>
		<input placeholder="Enter your name..."  required type="text" name="name" id="name" pattern="[a-zA-Z ]{1,100}">
	</div>

	<div>
	<label>Age</label>
	<input placeholder="Enter your age..."  required  type="number" name="age" id="age" pattern="[0-9]" minlength="2">
	</div>

	<div>
	<label>Email</label>
	<input placeholder="Enter your email..."  required type="email" name="email" id="email">
	</div>

	<div>
	<button type="submit">Register</button>
	<button type="button" onclick="displayData()">Hienthi</button>

	</div>
</div>
</form>

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

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

		localStorage.setItem("fullname", fullname) 
		localStorage.setItem("age", age)
		localStorage.setItem("email", email)

		return true;

	}

</script>

</body>
</html>


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

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