[Video] 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 - C2108G3

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

VIDEO OVERVIEW KIẾN THỨC HTML/CSS/JS

#login.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<form method="post" onsubmit="return login();">
		<label>Email: </label>
		<input required type="email" name="email" id="email_id" placeholder="Enter email">
		<label>Password: </label>
		<input required type="password" name="pwd" id="pwd_id" placeholder="Enter password">
		<p>
			<a href="register.html">Register a new account</a>
		</p>
		<button type="submit">Login</button>
	</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

#register.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Register Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<form method="post" onsubmit="return saveRegister();">
		<label>Full Name: </label>
		<input required type="text" name="fullname" id="fullname_id" placeholder="Enter full name">
		<label>Age: </label>
		<input required type="number" name="age" id="age_id" placeholder="Enter age">
		<label>Email: </label>
		<input required type="email" name="email" id="email_id" placeholder="Enter email">
		<label>Password: </label>
		<input required type="password" name="pwd" id="pwd_id" placeholder="Enter password">
		<label>Confirm Password: </label>
		<input required type="password" name="confirmPwd" id="confirm_pwd_id" placeholder="Enter password">
		<p>
			<a href="login.html">I have a account</a>
		</p>
		<button type="submit">Register</button>
		<button type="reset">Reset</button>
	</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

#script.js

var userList = []

var json = localStorage.getItem('userList')
if(json != null && json != '') {
	userList = JSON.parse(json)
}

function saveRegister() {
	var fullnameTag = document.getElementById('fullname_id')
	var ageTag = document.getElementById('age_id')
	var emailTag = document.getElementById('email_id')
	var pwdTag = document.getElementById('pwd_id')
	var confirmPwdTag = document.getElementById('confirm_pwd_id')

	if(pwdTag.value != confirmPwdTag.value) {
		alert('Password is not match, Plz check it again!!!')
		return false
	}

	var user = {
		'fullname': fullnameTag.value,
		'age': ageTag.value,
		'email': emailTag.value,
		'password': pwdTag.value
	}

	// console.log(user)
	var isFind = false
	for (var i = 0; i < userList.length; i++) {
		if(userList[i].email == user.email) {
			//Update nguoi dung -> trung dia chi email
			userList[i] = user
			isFind = true
			break
		}
	}
	if(!isFind) {
		//Them moi nguoi dung -> do ko tim thay email trung
		userList.push(user)
	}

	//update vao localStorage
	var json = JSON.stringify(userList)
	localStorage.setItem('userList', json)

	return false
}

function login() {
	var emailTag = document.getElementById('email_id')
	var pwdTag = document.getElementById('pwd_id')

	for(var user of userList) {
		if(user.email == emailTag.value && user.password == pwdTag.value) {
			//login thanh cong
			window.open('show.html', '_self')
			return false
		}
	}
	alert('Login failed!!!')

	return false
}

function showUserList() {
	var resultTag = document.getElementById('result')

	var index = 0
	for(var user of userList) {
		resultTag.innerHTML += `<tr>
				<td>${++index}</td>
				<td>${user.fullname}</td>
				<td>${user.age}</td>
				<td>${user.email}</td>
				<td>${user.password}</td>
			</tr>`
	}
}

#show.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>User List Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="showUserList()">
<div class="container">
	<table border="1" cellpadding="5" style="width: 100%">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</th>
				<th>Age</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody id="result"></tbody>
	</table>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

#style.css

.container {
	width: 600px;
	background-color: #f7da8b;
	margin: 0px auto;
	padding: 20px;
}

.container label, .container input {
	width: 100%;
	margin-bottom: 20px;
	font-size: 18px;
}

.container label {
	font-weight: bold;
}

.container button {
	font-size: 18px;
}

[Video] 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 - C2108G3

#login.html

#register.html

#script.js

#show.html

#style.css

Tags:

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

5

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

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