Sử dụng localStorage.setItem (“anyKeyName”, yourValue) để đặt giá trị trong bộ nhớ cục bộ và nếu bạn muốn tìm nạp giá trị thì bạn có thể sử dụng localStorage.getItem (“yourKeyName”)
Ví dụ
Sau đây là mã -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<input type="text" id="txtName" placeholder="Enter some value..." />
</body>
<script>
var textBoxNameHTML = document.getElementById('txtName');
textBoxNameHTML.addEventListener('change', (e) => {
localStorage.setItem("textBoxValue", e.target.value);
});
</script>
</html> Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)”. Nhấp chuột phải vào tệp và chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.
Đầu ra
Điều này sẽ tạo ra kết quả sau trên bảng điều khiển -
Bây giờ, tôi sẽ nhập một số giá trị vào hộp văn bản. Điều này sẽ tạo ra kết quả sau -
Bây giờ để nhận giá trị từ localStorage, hãy sử dụng khái niệm dưới đây và tìm nạp giá trị trên bảng điều khiển -
Nhấn phím Enter. Điều này sẽ tạo ra kết quả sau -
