4.1 localStorage và sessionStorage
Lưu trữ Web cho phép các ứng dụng web lưu dữ liệu trong trình duyệt của người dùng. Điều này hữu ích để lưu trữ thông tin mà cần được giữ lại giữa các lần truy cập hoặc khi điều hướng qua các trang. Trong HTML5 đã giới thiệu hai loại lưu trữ web chính: localStorage và sessionStorage.
localStorage là gì?
localStorage là bộ lưu trữ dữ liệu mà được lưu trữ trong trình duyệt của người dùng vô thời hạn. Dữ liệu trong localStorage vẫn còn khả dụng ngay cả sau khi đóng trình duyệt và khởi động lại máy tính. Điều này hữu ích để lưu trữ thông tin cần được giữ lại giữa các phiên, chẳng hạn như cài đặt người dùng hoặc dữ liệu giỏ hàng mua sắm.
sessionStorage là gì?
sessionStorage là bộ lưu trữ dữ liệu mà được lưu trữ trong trình duyệt của người dùng chỉ trong một phiên duy nhất. Dữ liệu trong sessionStorage chỉ khả dụng đến khi tab hoặc cửa sổ trình duyệt còn mở. Điều này hữu ích cho việc lưu trữ dữ liệu chỉ cần thiết trong suốt một phiên duy nhất, chẳng hạn như dữ liệu mẫu tạm thời hoặc trạng thái ứng dụng.
Phương thức và thuộc tính chính
Phương thức và thuộc tính của localStorage và sessionStorage
Cả hai loại lưu trữ web này có cùng API, bao gồm các phương thức và thuộc tính để làm việc với dữ liệu:
setItem(key, value): lưu giá trị với khóa được chỉ định.getItem(key): trả về giá trị được lưu với khóa chỉ định.removeItem(key): xóa giá trị với khóa chỉ định.clear(): xóa tất cả dữ liệu trong bộ nhớ.key(index): trả về khóa theo chỉ số.length: trả về số lượng cặp khóa-giá trị trong bộ nhớ.
4.2 Ví dụ sử dụng
Ví dụ sử dụng localStorage:
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// Lưu giá trị trong localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Tên người dùng đã được lưu!');
});
// Tải giá trị từ localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Tên người dùng đã được tải!\n' + `${savedUsername}`);
} else {
alert('Không tìm thấy tên người dùng.');
}
});
</script>
</body>
</html>
Ví dụ sử dụng sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// Lưu giá trị trong sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Dữ liệu đã được lưu trong phiên!');
});
// Tải giá trị từ sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Dữ liệu đã được tải từ phiên!\n' + `${savedData}`);
} else {
alert('Không tìm thấy dữ liệu trong phiên.');
}
});
</script>
</body>
</html>
4.3 So sánh localStorage và sessionStorage
Khác biệt giữa localStorage và sessionStorage
- Thời gian lưu trữ:
- localStorage lưu dữ liệu vô thời hạn, cho đến khi người dùng hoặc script xóa chúng.
- sessionStorage chỉ lưu dữ liệu trong thời gian phiên hiện tại (tab hoặc cửa sổ trình duyệt).
- Phạm vi:
- Dữ liệu trong localStorage có sẵn trong tất cả các tab và cửa sổ của cùng một tên miền.
- Dữ liệu trong sessionStorage chỉ khả dụng trong tab hoặc cửa sổ hiện tại.
- Kích thước lưu trữ:
- Thường thì localStorage và sessionStorage có giới hạn từ 5-10 MB cho mỗi tên miền, tùy thuộc vào trình duyệt.
Ví dụ so sánh việc sử dụng localStorage và sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// Sử dụng localStorage
localStorage.setItem('persistentData', 'This data persists across sessions');
console.log(localStorage.getItem('persistentData')); // "This data persists across sessions"
// Sử dụng sessionStorage
sessionStorage.setItem('temporaryData', 'This data persists only during the session');
console.log(sessionStorage.getItem('temporaryData')); // "This data persists only during the session"
</script>
</body>
</html>
4.4 Ứng dụng
Khi nào sử dụng localStorage:
- Lưu trữ dữ liệu cần lưu qua nhiều phiên, chẳng hạn như cài đặt hoặc sự ưu tiên của người dùng
- Lưu trữ dữ liệu có sẵn trong tất cả các tab và cửa sổ của cùng một tên miền
- Lưu trữ dữ liệu không thay đổi thường xuyên
Khi nào sử dụng sessionStorage:
- Lưu trữ dữ liệu tạm thời cần thiết chỉ trong phiên hiện tại
- Lưu trữ dữ liệu đặc thù cho tab hoặc cửa sổ trình duyệt hiện tại
- Lưu trữ dữ liệu cần được xóa khi đóng tab hoặc cửa sổ
Bảo mật và quyền riêng tư
Khi sử dụng lưu trữ web, cần cân nhắc đến các vấn đề bảo mật và quyền riêng tư:
- Mã hóa: dữ liệu trong lưu trữ web không được mã hóa theo mặc định. Nếu cần lưu trữ thông tin nhạy cảm, nên mã hóa dữ liệu trước khi lưu.
- Tấn công qua miền: lưu trữ web hoạt động trong phạm vi một miền, ngăn chặn truy cập dữ liệu từ các miền khác. Tuy nhiên, quan trọng phải bảo vệ chống lại các tấn công XSS (Cross-Site Scripting), để ngăn chặn kẻ xấu truy cập dữ liệu trong bộ nhớ.
- Giới hạn dữ liệu: hãy cố gắng chỉ lưu trữ thông tin cần thiết và thường xuyên xóa dữ liệu cũ để tránh đầy bộ nhớ.
GO TO FULL VERSION