sessionStorage tương tự như localStorage chỉ khác về tầm vực, thời gian sử dụng:
- Hỗ trợ lưu trữ và sử dụng nó linh hoạt tại frontend.
- Dung lượng của
sessionStoragevào khoảng 5MB. sessionStoragekhông liên hệ với server.- Muốn gửi thông tin này đến server ta có thể chủ động thông qua http request.
Điểm khác nhau giữa sessionStorage và localStorage.
- localStorage: Lưu trữ dữ liệu phân biệt theo domain cho đến khi nhận được lệnh xóa dữ liệu hoặc dữ liệu trình duyệt bị xóa.
- sessionStorage: Lưu trữ dữ liệu phân biệt theo domain, trên 1 tab hiện tại của trình duyệt, nếu tab đóng dữ liệu sẽ được xóa bỏ.
sessionStorage là gì?
sessionStorage là cách thức lưu trữ dữ liệu tại client độc lập với server, giả sử cần lưu trữ điểm số của 1 mini-game trên tab hiện tại, có thể lưu trong sessionStorage, khi mở 1 tab mới điểm số trong sessionStorage của tab mới khác với tab trước đó.
Cách sử dụng sessionStorage
Kiểm tra trình duyệt có hỗ trợ sessionStorage hay không?
Để sử dụng sessionStorage, trình duyệt cần hỗ trợ HTML5 trở lên. Tại thời điểm này, các trình duyệt web hiện đại đã hỗ trợ tốt cho HTML5, tuy nhiên ta vẫn nên kiểm tra xem sessionStorage như 1 thói quen tốt vì có thể ở 1 yêu cầu nào đó từ khách hàng trên 1 số trình duyệt lạc hậu chưa hỗ trợ.
<!DOCTYPE html>
<html>
<body>
<script>
if (sessionStorage) {
alert("STDIO: Yes, sessionStorage is here!");
} else {
alert("STDIO: Your browser does not support sessionStorage!");
}
</script>
</body>
</html>Nếu trình duyệt hỗ trợ sessionStorage, thông báo sau sẽ hiện lên
Lưu mới, thay đổi hoặc lấy dữ liệu từ sessionStorage
Lưu, thay đổi dữ liệu
sessionStorage.setItem(name, data)
Kiểm tra dữ liệu đã tồn tại hay chưa
sessionStorage.getItem(name) == null
Xóa dữ liệu
sessionStorage.removeItem(name)
Ví dụ
<!DOCTYPE html>
<html>
<body>
<script>
if (sessionStorage) {
// Save data to sessionStorage
sessionStorage.setItem("HP", "97");
sessionStorage.setItem("Name", "Nemesis");
// Get data from sessionStorage
console.log(sessionStorage.getItem("Name"));
// Check if data stored in sessionStorage
if (sessionStorage.getItem("HP") == null) {
console.log("No HP!!!");
}
// Remove data from sessionStorage
sessionStorage.removeItem("HP");
if (sessionStorage.getItem("Deleted HP?") == null) {
console.log("No HP?");
}
}
</script>
</body>
</html>
Do dữ liệu được lưu tại trình duyệt web của người dùng, cần cẩn thận việc dữ liệu thay đổi có gây nguy hại cho hệ thống hoặc người dùng hay không?
- Chỉ nên lưu trữ các giá trị liên quan cấu hình ngắn hạn, trạng thái nhất thời như tọa độ 1 div, xử lý hiệu ứng.
- Mật khẩu hay mã số bí mật không nên lưu trong
sessionStoragehoặc chưa được mã hóa trước khi lưu.
