By GokiSoft.com| 17:03 14/01/2022|
Học JS

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


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


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