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 [Video] Hướng dẫn tìm hiểu localStorage trong Javascript - Khóa học HTML/CSS/JS - C2110I

[Video] Hướng dẫn tìm hiểu localStorage trong Javascript - Khóa học HTML/CSS/JS - C2110I

by GokiSoft.com - 17:03 14/01/2022 1,106 Lượt Xem


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>LocalStorage in Javascript</title>

	<style type="text/css">
		.container {
			width: 500px;
			margin: 0px auto;
			background-color: orange;
			padding: 15px;
			margin-bottom: 20px;
		}

		.container input {
			width: 100%;
			margin-bottom: 20px;
		}

		.container button {
			padding: 10px 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<input type="number" name="x" id="x_id" placeholder="Enter x" onchange="updateX()">
	<input type="number" name="y" id="y_id" placeholder="Enter y" onchange="updateY()">
	<button onclick="tinhTong()">+</button><button onclick="clearData()">Xoa LocalStorage</button>
</div>

<div class="container">
	<table border="1" cellpadding="5" style="width: 100%;">
		<thead>
			<tr>
				<th>No</th>
				<th>X</th>
				<th>Y</th>
				<th>Result</th>
			</tr>
		</thead>
		<tbody id="result"></tbody>
	</table>
</div>

<script type="text/javascript">
	// Khi lam viec voi localStorage -> save, read noi dung, xoa noi dung
	var resultTag = document.getElementById('result')
	var xTag = document.getElementById('x_id')
	var yTag = document.getElementById('y_id')

	var index = 0
	var dataList = []

	//Doc noi dung trong localStorage ra chuong trinh -> Code viet dau cung dc
	//Gia su: nghiep vu -> tai website -> doc x, y tu localStorage -> hien thi len form
	x = localStorage.getItem('x')
	y = localStorage.getItem('y')
	json = localStorage.getItem('history')
	if(json != null && json != '') {
		//convert json strong -> array object
		dataList = JSON.parse(json)

		//Hien thi lai du lieu len table
		for (var i = 0; i < dataList.length; i++) {
			resultTag.innerHTML += `<tr>
					<td>${i+1}</td>
					<td>${dataList[i].x}</td>
					<td>${dataList[i].y}</td>
					<td>${dataList[i].s}</td>
				</tr>`
		}
	}

	xTag.value = x
	yTag.value = y

	function clearData() {
		localStorage.removeItem('x')
		localStorage.removeItem('y')
		localStorage.removeItem('history')

		index = 0
		xTag.value = ''
		yTag.value = ''
		resultTag.innerHTML = ''
	}

	function updateX() {
		v = xTag.value

		//Save x -> localStorage -> Quan ly du lieu theo kieu key: value (key: int, string, value: int, float, char, string, boolean -> ko luu object | array | array object)
		// localStorage: bien moi truong -> nghia co san -> chi can su dung thoi
		localStorage.setItem('x', v)
		//Luu y -> ghi de: co nghia la -> key:x da ton tai truoc do -> ghi de noi dung v vao
	}

	function updateY() {
		v = yTag.value
		localStorage.setItem('y', v)
	}

	function tinhTong() {
		s = parseFloat(xTag.value) + parseFloat(yTag.value)

		o = {
			"x": xTag.value,
			"y": yTag.value,
			"s": s
		}
		dataList.push(o)

		//Save dataList -> localStorage
		//json: convert array object | object -> json string (string) -> save localStorage
		//doc noi dung localStorage -> json string -> convert -> array object | object
		var json = JSON.stringify(dataList)
		localStorage.setItem('history', json)

		resultTag.innerHTML += `<tr>
				<td>${++index}</td>
				<td>${xTag.value}</td>
				<td>${yTag.value}</td>
				<td>${s}</td>
			</tr>`
	}
</script>
</body>
</html>


Bình luận



Chia sẻ từ lớp học

Tài Liệu Tham Khảo

Đã sao chép!!!