By GokiSoft.com| 15:14 19/01/2022|
Học JS

LocalStorage: Quản lý đăng ký page- đăng nhập page - Hiển thị thông tin người dung- 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, pwd) 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. Quản lý được tất cả người dùng đã được thêm vào localStorage -> Trong TH trùng địa chỉ email thì update thông tin cũ của người dùng.

2. Tạo ra 1 trang login -> cho phép người dùng đăng nhập bằng email và password -> TH login thành công thi show trang show.html

3. Tạo ra 1 trang web mới là : show.html -> Lấy thông tin lưu trong LocalStorage và hiển thị ra màn hình (Hiển thị danh sách người dùng đã được đăng ký)

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:33:11


#login.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 login();">
			<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></label>
				<button type="submit">Register</button>
			</div>
		</form>
	</div>
</body>
</html>


#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


// Luu toan bo nguoi dung trong localStorage bang key: userList
var userList = []
// Tai trang web len -> kiem tra xem trong localStorage da luu thong tin userList
var json = localStorage.getItem('userList')
if(json != null && json != '') {
	userList = JSON.parse(json)
}

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;
	}

	var user = {
		'fullname': fname,
		'email': email,
		'password': password,
		'birthday': birthday
	}

	var isFind = false
	for (var i = 0; i < userList.length; i++) {
		if(userList[i].email == email) {
			//update
			isFind = true
			userList[i] = user
		}
	}
	if(!isFind) {
		userList.push(user)
	}
	var json = JSON.stringify(userList)
	localStorage.setItem('userList', json)

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

	return true;
}

function login() {
	var email = document.getElementById('email').value
	var password = document.getElementById('password').value

	for (var i = 0; i < userList.length; i++) {
		if(userList[i].email == email && userList[i].password == password) {
			//dang nhap thanh cong
			alert('Dang nhap thanh cong!!!')
			// Chuyen sang trang show.html
			// C1: Su dung js
			window.open('show2.html', '_self')
			return false;
		}
	}

	//dang nhap khong thanh cong
	alert('Dang nhap that bai, vui long kiem tra thong tin tai khoan')
	return false;
}


#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


// Luu toan bo nguoi dung trong localStorage bang key: userList
var userList = []
// Tai trang web len -> kiem tra xem trong localStorage da luu thong tin userList
var json = localStorage.getItem('userList')
if(json != null && json != '') {
	userList = JSON.parse(json)
}

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
}

function init2() {
	var resultTag = document.getElementById('result')
	for (var i = 0; i < userList.length; i++) {
		resultTag.innerHTML += `<tr>
					<td>${i+1}</td>
					<td>${userList[i].fullname}</td>
					<td>${userList[i].email}</td>
					<td>${userList[i].birthday}</td>
				</tr>`
	}
}


#show2.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="init2()">
	<div class="container">
		<table border="1" cellpadding="3" cellpadding="0" style="width: 100%">
			<thead>
				<tr>
					<th>No</th>
					<th>Full Name</th>
					<th>Email</th>
					<th>Birthday</th>
				</tr>
			</thead>
			<tbody id="result">
				
			</tbody>
		</table>
	</div>
</body>
</html>


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