By GokiSoft.com| 09:18 10/01/2022|
Học JS

[Video] LocalStorage: Quản lý thông tin sinh viên bằng Javascript - Lập trình Javascript - C2108G3

LocalStorage: Quản lý thông tin sinh viên bằng Javascript - 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>Quan Ly Sinh Vien - Page</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>

	<style type="text/css">
		.container {
			width: 600px;
			margin: 0px auto;
			border: solid #d6d6d6 1px;
			margin-bottom: 20px;
		}

		.container .heading {
			font-size: 16px;
			background-color: #28a745;
			color: white;
			padding: 15px;
			font-weight: bold;
		}

		.container .body label, .container .body input {
			width: 95%;
			margin-bottom: 15px;
			font-size: 15px;
			margin: 15px;
		}

		.container .body button {
			font-size: 15px;
			margin-bottom: 15px;
		}

		.btn-success {
			background-color: #28a745;
			margin-left: 15px;
			border: none;
			padding: 5px;
			color: white;
		}

		.btn-warning {
			background-color: orange;
			margin-left: 5px;
			border: none;
			padding: 5px;
			color: black;
		}

		.btn-danger {
			background-color: red;
			margin-left: 5px;
			border: none;
			padding: 5px;
			color: white;
		}
	</style>
</head>
<!-- <body onload="init()"> -->
<body>
<div class="container">
	<div class="heading">
		Dang Ky Tai Khoan User
	</div>
	<div class="body">
		<form method="post" onsubmit="return saveData()">
			<label>User Name: </label>
			<input required type="text" name="username" id="username_id" placeholder="Enter user name">
			<label>Full Name: </label>
			<input required type="text" name="fullname" id="fullname_id" placeholder="Enter full name">
			<label>Email: </label>
			<input required type="email" name="email" id="email_id" placeholder="Enter email">
			<label>Birthday: </label>
			<input required type="date" name="birthday" id="birthday_id" placeholder="Enter birthday">
			<button type="submit" class="btn-success">Save</button>
			<button type="reset" class="btn-warning">Reset</button>		
		</form>
	</div>
</div>

<div class="container">
	<table style="width: 100%;">
		<thead class="heading">
			<tr>
				<th>No</th>
				<th>User Name</th>
				<th>Full Name</th>
				<th>Email</th>
				<th>Birthday</th>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody id="result"></tbody>
	</table>
</div>
</body>
</html>


#script.js


var studentList = []
var currentIndex = -1

$(function() {
	//Bat dau xu ly -> khi khoi code dc tai xong & ve xong UI
	init()
})

function init() {
	var json = localStorage.getItem('studentList')
	if(json != '' && json != null) {
		studentList = JSON.parse(json)

		showData()
	}
}

function saveData() {
	var std = {
		"username": $('#username_id').val(),
		"fullname": $('#fullname_id').val(),
		"email": $('#email_id').val(),
		"birthday": $('#birthday_id').val()
	}

	if(currentIndex >= 0) {
		studentList[currentIndex] = std
		currentIndex = -1
	} else {
		studentList.push(std)
	}

	saveLocalStorage()
	showData()

	return false;
}

function selectedItem(index) {
	currentIndex = index

	//set du lieu vao form input
	$('#username_id').val(studentList[index].username)
	$('#fullname_id').val(studentList[index].fullname)
	$('#email_id').val(studentList[index].email)
	$('#birthday_id').val(studentList[index].birthday)
}

function removeItem(index) {
	option = confirm('Are you sure to remove this item?')
	if(!option) return

	studentList.splice(index, 1)

	saveLocalStorage()
	showData()
}

function showData() {
	$('#result').empty()

	for (var i = 0; i < studentList.length; i++) {
		$('#result').append(`<tr>
			<td>${i+1}</td>
			<td>${studentList[i].username}</td>
			<td>${studentList[i].fullname}</td>
			<td>${studentList[i].email}</td>
			<td>${studentList[i].birthday}</td>
			<td><button class="btn-warning" onclick="selectedItem(${i})">Edit</button></td>
			<td><button class="btn-danger" onclick="removeItem(${i})">Remove</button></td>
		</tr>`)
	}
}

function saveLocalStorage() {
	var json = JSON.stringify(studentList)

	localStorage.setItem('studentList', json)
}


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 đó