HTML Storage
Ngay khi JavaScript ra đời thì cookies cũng bắt đầu được biết đến, do đó việc lưu trữ dữ liệu trên web không phải là một khái niệm mới. Tuy nhiên, web storage là một phiên bản lưu trữ dữ liệu mạnh hơn rất nhiều mang lại tính bảo mật cao hơn, tốc độ cao hơn và dễ sử dụng hơn. Bạn cũng có thể lưu trữ một lượng lớn dữ liệu trong web storage. Dung lượng lưu trữ chính xác phải dựa trên trình duyệt web, nhưng nó thường từ 5 đến 10MB, đó là một dung lượng lưu trữ lớn cho một ứng dụng HTML. Một lợi ích khác là không phải mọi máy chủ đều yêu cầu tải dữ liệu này. Hạn chế duy nhất là ở chỗ bạn không thể chia sẻ web storage giữa các trình duyệt; nếu bạn lưu trữ dữ liệu trong trình duyệt Safari, bạn không thể truy cập dữ liệu đó trong trình duyệt Mozilla Firefox.
Người ta dựng sẵn hai kiểu đối tượng web storage trong HTML5:
Session Storage
• Đối tượng sessionStorage lưu trữ dữ liệu cho một phiên làm việc duy nhất. Nếu người dùng đóng trang hoặc trình duyệt, dữ liệu bị xóa hết.
Refresh the page to increase number of hits.
Close the window and open it again and check the result.
Refresh the page to increase number of hits.
Close the window and open it again and check the result.
Local Storage
Đối tượng localStorage lưu trữ dữ liệu không thời hạn. Dữ liệu vẫn còn được lưu trữ khi đóng trang web hoặc trình duyệt, tùy thuộc vào giá trị thiết lập dung lượng lưu trữ cho trình duyệt của người dùng.
Refresh the page to increase number of hits.
Close the window and open it again and check the result.
Refresh the page to increase number of hits.
Close the window and open it again and check the result.
Thực Hành
Tạo một biểu mẫu web đơn giản gồm có một họ và tên, địa chỉ email và nút gửi đi
HTML5 Web Storage
• Khi người dùng gửi biểu mẫu lên, đầu tiên mã ngăn không cho việc gửi lên mặc định xảy ra bằng cách lấy ra ID của web-storage-form và thu thập dữ liệu gửi lên bằng cách sử dụng jQuery. Khi biểu mẫu này gửi lên, bạn có thể thu thập các giá trị của biểu mẫu và URL của hành động xử lý biểu mẫu để lưu trữ vào các biến. Bạn phải tuần tự hóa các giá trị của biểu mẫu web khi gửi các giá trị dưới dạng dữ liệu gửi lên của Ajax (JavaScript không đồng bộ + XML) hoặc lưu trữ chúng trong đối tượng web storage. Trước khi gửi đi biểu mẫu, hãy sử dụng thuộc tính navigator.onLine để xem liệu người dùng có đang nối mạng hay không.
• Nếu người dùng đang nối mạng, hãy sử dụng hàm jQuery.post, là một hàm Ajax tốc ký để gửi và nhận dữ liệu từ máy chủ. Hàm này nhận bốn đối số: url để gửi dữ liệu tới, data mà bạn đang gửi đi (các giá trị biểu mẫu đã tuần tự hóa), một hàm callback được kích hoạt khi một yêu cầu thành công và một dataType. Trong ví dụ này, không có dataType nào vì nó sử dụng giá trị mặc định.
• Nếu người dùng đang ở chế độ ngoại tuyến (offline), bạn sẽ cần đến web storage. Bây giờ việc lưu các giá trị localStorage đã sẵn sàng, hãy kiểm tra xem liệu chúng có tồn tại hay không khi người dùng quay lại nối mạng bằng cách thêm một câu lệnh if để kiểm tra xem localStorage.formValues có giá trị nào không. Nếu có, bạn biết rằng biểu mẫu này trước đó đã được gửi tới đối tượng localStorage và có thể gửi một cách an toàn dữ liệu đến máy chủ bằng cách sử dụng phương thức jQuery.post do bạn thiết lập trước đó. Sau khi gửi đi các giá trị này, bạn nên loại bỏ chúng khỏi đối tượng web storage để chúng không bị vô tình gửi đi lần nữa.
• Để tạo một ví dụ hoàn chỉnh, một tệp post.php nhận dữ liệu biểu mẫu gửi đi và đáp ứng bằng cách in mảng các cặp khóa/giá trị. Khi jQuery.post nhận được đáp ứng, dữ liệu được in ra giao diện bàn điều khiển (Console).
[highlighter]
