By GokiSoft.com| 16:33 17/01/2022|
Học HTML5 - CSS3

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

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


#index.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Register Page</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<form method="post" onsubmit="return saveData();">
			<div class="form-group">
				<label>Full Name: </label>
				<input required type="text" name="fullname" class="form-control">
			</div>

			<div class="form-group">
				<label>Age: </label>
				<input required type="number" name="age" class="form-control">
			</div>

			<div class="form-group">
				<label>Email: </label>
				<input required type="email" name="email" class="form-control">
			</div>

			<div class="form-group">
				<button class="btn btn-success" type="submit">Save</button>
				<button class="btn btn-warning" type="reset">Reset</button>
			</div>
		</form>
	</div>

<script type="text/javascript">
	var userList = []

	function saveData() {
		var user = {
			"fullname": $('[name=fullname]').val(),
			"age": $('[name=age]').val(),
			"email": $('[name=email]').val(),
		}
		// console.log(user)
		userList.push(user)

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

		return false;
	}
</script>
</body>
</html>


#show.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>User Management Page</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div class="container">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>No</th>
					<th>Full Name</th>
					<th>Age</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody id="result"></tbody>
		</table>
	</div>

<script type="text/javascript">
	var userList = []

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

	for (var i = 0; i < userList.length; i++) {
		$('#result').append(`<tr>
					<td>${i + 1}</td>
					<td>${userList[i].fullname}</td>
					<td>${userList[i].age}</td>
					<td>${userList[i].email}</td>
				</tr>`)
	}
</script>
</body>
</html>


Tags:



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

5

(Dựa trên đánh giá ngày hôm nay)

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

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