Làm việc ngoại tuyến với tính năng web storage của HTML5

Tổng quan 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...
Nội dung trích xuất từ tài liệu:
Làm việc ngoại tuyến với tính năng web storage của HTML5Làm việc ngoại tuyến với tính năng web storage của HTML5Tổng quanNgay 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ênweb 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ệumạ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ũngcó 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ựatrê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ạnchế 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:  Đố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.  Đố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.Các từ viết tắt thông dụng  API: Application Programming Interface (Giao diện lập trình ứng dụng)  CSS: Cascading Style Sheets (Các bản định kiểu xếp chồng)  HTML: HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản)  JSON: JavaScript Serialized Object Notation (Ký pháp đối tượng JavaScript)Cả hai đối tượng lưu trữ đều có cùng các phương thức và các thuộc tính. Để thống nhất, bài nàysử dụng đối tượng localStorage trong suốt các ví dụ.Trong bài này, hãy tìm hiểu về sức mạnh của web storate và tại sao nó là một phương thức lưutrữ tốt hơn so với cookie. Hãy khám phá các khái niệm cơ sở về web storage, các phương thứccủa web storage trong HTML5 và sự hỗ trợ của trình duyệt.Bạn có thể tải về mã nguồn các ví dụ được dùng trong bài này.Về đầu trangCác trình duyệt hỗ trợTất cả các phiên bản mới của các trình duyệt mới nhất, bao gồm Firefox, Google Chrome, Safari,Opera và Microsoft® Windows® Internet Explorer® 8+. Thật không may, phiên bản InternetExplorer 7 và trước đó không hỗ trợ tính năng web storage. Bảng 1 cho thấy các phiên bản củatừng trình duyệt máy tính có hỗ trợ tính năng web storage của HTML5.Bảng 1. Các trình duyệt máy tính hỗ trợ web storage trên HTML5Chrome Firefox Safari Opera Internet Explorer4+ 4+ 4+ 11+ 8+Các trình duyệt di động, ngoài Opera Mini, cũng hỗ trợ tính năng web storage của HTML5.Bảng 2 cho thấy các phiên bản của từng trình duyệt di động có hỗ trợ tính năng web storage củaHTML5.Bảng 2. Các trinh duyệt di động hỗ trợ web storate trên HTML5 iOS AndroidOpera MiniOpera Mobile5+ 3+ NA 11+Việc các trình duyệt hỗ trợ web storage của HTML5 là khá ấn tượng. Tuy nhiên, các trình duyệtcũ hơn cần có một kiểu kiểm tra trình duyệt nào đó về hỗ trợ tính năng web storage trước khi bạnđịnh sử dụng nó. Việc kiểm tra một trình duyệt có hỗ trợ tính năng web storage hay không rất dễdàng. Bạn có thể sử dụng một câu lệnh có điều kiện đơn giản để xem liệu đối tượng lưu trữ dữliệu của HTML5 đã được định nghĩa chưa. Nếu nó đã được định nghĩa thì việc tiếp tục viết kịchbản lệnh với web storage là an toàn. Nếu nó vẫn chưa được định nghĩa, bạn phải sử dụng mộtphương pháp thay thế khác, chẳng hạn như các cookie của JavaScript, nếu việc lưu trữ dữ liệu làcần thiết. Liệt kê 1 cho thấy ví dụ về một cách kiểm tra trình duyệt đơn giản để tìm đối tượngStorage (lưu trữ).Liệt kê 1. Kiểm tra trình duyệt để tìm sự hỗ trợ cho tính năng web storageif(typeof(Storage)!== undefined) { // Web storage is supported}else { // Web storage is NOT supported}Nếu một trình duyệt không hỗ trợ tính năng web storage, bạn có thể tạo ra một đối tượng webstorage tùy chỉnh bằng cách sử dụng các cookie của JavaScript hay một thư viện hiện có như làAmplifyJS. AmplifyJS là một tập hợp các thành phần được thiết kế để giải quyết các vấn đề ứngdụng web phổ biến, bao gồm sự hỗ trợ tính năng web storage trong các trình duyệt cụ thể, vớimột API đơn giản. AmplifyJS giải quyết vấn đề bằng trình bao bọc (wrapper) amplify.store đểxử lý lưu trữ tồn tại lâu bền phía máy khách, có hỗ trợ Internet Explorer 5+, Firefox 2+, Safari4+, Chrome, Opera 10.5+, iOS 2+ và Android 2+. Thư viện này cũng cung cấp một API thốngnhất để xử lý lưu trữ với nhiều trình duyệt; bạn không phải viết mã khác nhau dựa theo các trìnhduyệt đang xét. Nếu trình duyệt hỗ trợ tính năng web storage của HTML5 thì AmplifyJS sẽ sửdụng các kỹ thuật lưu trữ mới nhất. Nếu trình duyệt không hỗ trợ tính năng web storage củaHTML5 thì AmplifyJS sẽ hạ cấp để hỗ trợ nó mà không cần chức năng đó. ...