Để lưu trữ thông tin của người dùng tại trình duyệt web như lưu trữ điểm trong game, lưu trữ tạm các hiệu ứng, cookies là lựa chọn tốt để hiện thực, nhưng cookies có 1 số đặt điểm như sau:
- Dung lượng tối đa 4KB.
- Dữ liệu phải gửi qua lại giữa server và client khi phát sinh request.
Để chủ động hơn, HTML5 hiện thực một khái niệm mới là localStorage:
- Hỗ trợ lưu trữ và sử dụng nó linh hoạt tại frontend.
- Dung lượng của
localStoragevào khoảng 2MB đến 10MB. localStoragekhô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.
localStorage là gì?
localStorage là cách thức lưu trữ dữ liệu tại client độc lập với server. Giả định viết 1 ứng dụng web cho phép người dùng viết bài trên STDIO, để tránh người dùng chưa lưu trữ bài viết nhưng lại gặp sự cố về máy tính, ứng dụng tiến hành lưu trữ mỗi 5 phút 1 lần, khi gặp sự cố ở lần mở web sau sẽ kiểm tra trong localStorage có dữ liệu hay không, nếu có thì có thể hỏi người dùng có muốn khôi phục lại phiên bản làm việc trước đó không?
Để hiện thực tính năng lưu trữ tạm này, yêu cầu mỗi 5 phút dữ liệu tự lưu trữ lên server, nếu chỉ đòi hỏi lưu trữ tạm ở trình duyệt web, localStorage là lựa chọn tốt. Server sẽ giảm được lượng request đáng kể nhưng vẫn mang được trải nghiệm tốt cho người dùng. Ngoài ra, thời gian lưu trữ của localStorage có thể kéo dài cho đến khi frontend ra lệnh xóa.
Cách sử dụng localStorage
Kiểm tra trình duyệt có hỗ trợ localStorage hay không?
Để sử dụng localStorage, 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 localStorage 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 (localStorage) {
alert("STDIO: Yes, localStorage is here!");
} else {
alert("STDIO: Your browser does not support localStorage!");
}
</script>
</body>
</html>Nếu trình duyệt có hỗ trợ thì thông báo sau sẽ hiện lên
Lưu mới, thay đổi hoặc lấy dữ liệu từ localStorage
Lưu, thay đổi dữ liệu
localStorage.setItem(name, data)
Kiểm tra dữ liệu đã tồn tại hay chưa
localStorage.getItem(name) == null
Xóa dữ liệu
localStorage.removeItem(name)
Ví dụ
<!DOCTYPE html>
<html>
<body>
<script>
if (localStorage) {
// Save data to localStorage
localStorage.setItem("Title", "Tìm Hiểu về Window.localStorage");
localStorage.setItem("Content", "<p>Để lưu trữ thông tin ...");
// Get data from localStorage
console.log(localStorage.getItem("Content"));
// Check if data stored in localStorage
if (localStorage.getItem("Title") == null) {
console.log("Title? Where is Title?");
} // Remove data from localStorage
localStorage.removeItem("Title");
if (localStorage.getItem("Title") == null) {
console.log("Deleted Title?");
}
}
</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 đến xử lý giao diện như lựa chọn theme, trải nghiệm người dùng như lựa chọn ngôn ngữ.
- Mật khẩu hay mã số bí mật không nên lưu trong
localStoragehoặc chưa được mã hóa trước khi lưu.
