IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS LocalStorage: Quản lý đăng ký đăng nhập- Lập trình Javascript

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

by GokiSoft.com - 23:41 30/10/2021 11,640 Lượt Xem

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


Bình luận



Chia sẻ từ lớp học

TRẦN VĂN ĐIỆP [Teacher]

Ngày viết: 19:13 04/03/2021


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

Ngày viết: 21:40 02/03/2021

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

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


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

Ngày viết: 21:33 02/03/2021



<!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]

Ngày viết: 21:00 02/03/2021


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

Ngày viết: 21:19 28/12/2020


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


Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!