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 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:
Đố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ày
sử 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ưu
trữ 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ức
củ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 trang
Cá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 Internet
Explorer 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ủa
từ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 HTML5
Chrome Firefox
Safari
Opera
Internet Explorer
4+ 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ủa
HTML5.
Bảng 2. Các trinh duyệt di động hỗ trợ web storate trên HTML5
iOS AndroidOpera MiniOpera Mobile
5+ 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ệt
cũ 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ịch
bả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ột
phươ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ượng
Storage (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 storage
if(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 web
storage 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 đề ứng
dụ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ới
mộ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+, Safari
4+, Chrome, Opera 10.5+, iOS 2+ và Android 2+. Thư viện này cũng cung cấp một API thống
nhấ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ình
duyệ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ủa
HTML5 thì AmplifyJS sẽ hạ cấp để hỗ trợ nó mà không cần chức năng đó. Xem phần Tài
nguyên để tìm hiểu thêm về AmplifyJS và API cho trình bao bọc lưu trữ của nó.
Về đầu trang
Bắt đầu
Có một vài phương thức dễ sử dụng cung cấp các chức năng web storage của HTML5. Những
phương thức này hỗ trợ thiết lập một cặp khóa/giá trị, hai tùy chọn để lấy ra một giá trị dựa trên
một khóa, xóa tất cả các cặp khóa/giá trị cùng một lúc và loại bỏ một cặp khóa/giá trị cụ thể.
Bảng 3 cho thấy các phương thức web storage của HTML5 có sẵn.
Bảng 3. Các phương thức web storage của HTML5
Phương thức Mô tả
setItem(key,
value)
Thêm một cặp khóa/giá trị vào đối tượng web storage để sử dụng sau này.
Giá trị này có thể là bất kỳ kiểu dữ liệu nào: một chuỗi ký tự, số, mảng và
v.v.
getItem(key) Lấy ra một giá trị dựa trên khóa đã được sử dụng để lưu trữ nó ở vị trí đầu
tiên.
clear()
Xóa tất cả các cặp khóa/giá trị khỏi đối tượng web storage.
removeItem(key) Loại bỏ một cặp khóa/giá trị cụ thể khỏi đối tượng web storage dựa trên
một khóa.
key(n)
Lấy ra giá trị cho key[n].
Khi tạo và thêm các cặp khóa/giá trị cho đối tượng web storage, bạn có thể sử dụng bất kỳ kiểu
dữ liệu nào làm giá trị trong cặp đó (một chuỗi ký tự, số, mảng, đối tượng và v.v). Để lưu trữ một
mảng hoặc một đối tượng, bạn phải sử dụng đối tượng JSON để chuyển đổi dữ liệu thành một
chuỗi ký tự bằng cách sử dụng phương thức JSON.stringify. Khi lấy ra dữ liệu, bạn có thể
phân tích cú pháp nó bằng cách sử dụng JSON.parse, để trả về đối tượng hoặc mảng của bạn
theo trạng thái ban đầu của nó. Ngoài ra còn có hai cách khác để thêm một cặp khóa/giá trị vào
đối tượng web storage. Cách đầu tiên là sử dụng phương thức setItem, như trong Liệt kê 2.
Liệt kê 2. Thêm một cặp khóa/giá trị vào đối tượng web storage khi sử dụng setItem
localStorage.setItem('myKey', 'myValue');
Tùy chọn thứ hai để thêm một cặp khóa/giá trị vào đối tượng web storage là thiết lập trực tiếp giá
trị của khóa bằng cách sử dụng đối tượng web storage với cú pháp dấu chấm, như trong Liệt kê
3.
Liệt kê 3. Thêm trực tiếp một cặp khóa/giá trị vào đối tượng web storage
localStorage.myKey = 'myValue';
Lấy ra các giá trị đã lưu cũng dễ dàng như thế. Một lần nữa, lại có hai tùy chọn. Tùy chọn đầu
tiên là sử dụng phương thức getItem, để nhận một khóa làm một đối số và trả về giá trị tương
ứng nếu có một giá trị đã lưu. Liệt kê 4 hiển thị ví dụ.
Liệt kê 4. Lấy ra một cặp khóa/giá trị từ đối tượng web storage bằng cách sử dụng getItem
localStorage.getItem('myKey');
Tùy chọn thứ hai để lấy ra một cặp khóa/giá trị từ đối tượng web storage là truy cập trực tiếp vào
cặp giá trị khóa đó bằng cách sử dụng cú pháp dấu chấm, như trong Liệt kê 5. Ví dụ này trả về
giá trị chuỗi 'myValue' đã được thiết lập trong các ví dụ trước.
Liệt kê 5. Lấy ra trực tiếp một cặp khóa/giá trị từ đối tượng web storage
localStorage.myKey;
Ngoài ra cũng có hai cách để loại bỏ dữ liệu đã lưu trữ. Bạn có thể loại bỏ tất cả các mục cùng
một lúc hoặc bạn có thể loại bỏ riêng từng mục mỗi lần một mục. Để loại bỏ tất cả các mục khỏi
đối tượng web storage cùng một lúc, hãy sử dụng phương thức clear, như thể hiện trong Liệt kê
6.
Liệt kê 6. Loại bỏ tất cả các cặp khóa/giá trị khỏi đối tượng web storage
localStorage.clear();
Để loại bỏ một cặp khóa/giá trị riêng lẻ khỏi một đối tượng web storage, bạn cần phải sử dụng
phương thức removeItem. Liệt kê 7 cho thấy một ví dụ về phương thức removeItem để nhận
một khóa làm đối số để nhận biết cặp khóa/giá trị nào cần loại bỏ khỏi đối tượng lưu trữ.
Liệt kê 7. Loại bỏ một cặp khóa/giá trị riêng lẻ khỏi đối tượng web storage
localStorage.removeItem('myKey');
Liệt kê 8 cho thấy một ví dụ về cách sử dụng đối tượng JSON để lưu trữ một mảng dưới dạng
một chuỗi ký tự bằng cách sử dụng JSON.stringify. Bạn xử lý các đối tượng theo cùng cách.
Liệt kê 8. Lưu trữ một mảng như là một chuỗi ký tự trong web storage của HTML5
var myArray = new Array('First Name', 'Last Name', 'Email Address');
localStorage.formData = JSON.stringify(myArray);
Để lấy ra phiên bản chuỗi ký tự của mảng này từ đối tượng web storage và chuyển đổi nó trở lại
thành một mảng tiện lợi trong JavaScript, chỉ cần sử dụng phương thức JSON.parse, như thể
hiện trong Liệt kê 9.
Liệt kê 9. Lấy ra phiên bản chuỗi ký tự của một mảng từ web storage của HTML5 và
chuyển nó thành một mảng JavaScript tiện lợi
var myArray = JSON.parse(localStorage.formData);
Tất cả các trình duyệt Internet Explorer 8+, Opera 10.5+, Firefox 3.5+, Safari 4+ và Chrome đều
có một đối tượng JSON nguyên gốc để hỗ trợ mã trong các ví dụ trước. Nếu bạn sử dụng một
phiên bản trình duyệt cũ hơn, bạn có thể tải về tệp json2.js (xem phần Tài nguyên).
Đến lúc này bạn đã thấy là rất dễ sử dụng web storage. Tuy nhiên, trước khi bắt tay vào làm thì
bạn nên hiểu rằng bảo đảm an toàn có thể là một mối quan tâm trên các máy tính chia sẻ chung.
web storage không hề an toàn hơn so với các cookie. Đừng lưu trữ thông tin nhạy cảm như mật
khẩu và các số thẻ tín dụng, bên phía trình máy khách.
Về đầu trang
Thực hành web storage
Bây giờ khi đã trình bày xong những điều cơ bản, đây là lúc đưa web storage của HTML5 vào sử
dụng. Giả sử, trên trang web của mình, bạn muốn cung cấp sự hỗ trợ trong lúc tắt mạng cho một
biểu mẫu web. Sẽ thật là tuyệt nếu một người dùng có thể gửi biểu mẫu đó lên và nó sẽ được
đồng bộ hóa với máy chủ khi trang web được kết nối trở lại. Điều này có thể thực hiện được với
HTML5.
Hãy 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, như trong
Liệt kê 10.