Để 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:
Để chủ động hơn, HTML5 hiện thực một khái niệm mới là localStorage:
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.
Để 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ợ.
Nếu trình duyệt có hỗ trợ thì thông báo sau sẽ hiện lên
<!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>
