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ý page- đăng nhập page - Hiển thị thông tin người dung- Lập trình Javascript

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

by GokiSoft.com - 23:40 30/10/2021 2,887 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, 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ý)

Bình luận



Phản Hồi Bởi:

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

Chia sẻ từ lớp học

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

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


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


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

Tài Liệu Tham Khảo

Đã sao chép!!!