Bộ nhớ cục bộ trong HTML5

HTML lưu trữ cục bộ được đánh giá tốt hơn so với các tập tin cookie.

HTML Local Storage là gì?

Với Local Storage, các ứng dụng web có thể lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng. Trước HTML5, dữ liệu ứng dụng phải được lưu trữ trong cookie, bao gồm trong mọi yêu cầu của máy chủ. Local Storage an toàn hơn và có thể lưu trữ dữ liệu ở mức cục bộ mà không ảnh hưởng đến hiệu suất trang web.

Không giống như cookie, giới hạn lưu trữ lớn hơn nhiều (ít nhất 5MB) và thông tin không bao giờ được chuyển đến máy chủ.

Local Storage là trên mỗi nguồn gốc (mỗi miền và giao thức). Tất cả các trang, từ một nguồn gốc, có thể lưu trữ và truy cập cùng một dữ liệu.

Trình duyệt hỗ trợ

Các số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Kho lưu trữ cục bộ.

Các đối tượng Local Storage HTML

Local Storage HTML cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách:

• window.localStorage – lưu trữ dữ liệu không có ngày hết hạn
• window.sessionStorage – lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi đóng tab của trình duyệt)

Trước khi sử dụng lưu trữ cục bộ, hãy kiểm tra hỗ trợ trình duyệt dành cho localStorage và sessionStorage:

if (typeof(Storage) !== “undefined”) {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

Đối tượng localStorage

Đối tượng localStorage lưu trữ dữ liệu mà không có ngày hết hạn. Dữ liệu sẽ không bị xóa khi trình duyệt đóng lại và sẽ xuất hiện vào ngày, tuần hoặc năm tiếp theo.

// Store
localStorage.setItem(“lastname”, “Smith”);
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”);

Giải thích ví dụ trên:

• Tạo cặp tên / giá trị cục bộ với tên = “lastname” và value = “Smith”
• Lấy giá trị của “lastname” và chèn nó vào phần tử với id = “result”

Ví dụ trên cũng có thể được viết như sau:

// Store
localStorage.lastname = “Smith”;
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.lastname;

Cú pháp để xóa mục lưu trữ cục bộ “lastname” như sau:

localStorage.removeItem(“lastname”);

Lưu ý: Các cặp tên / giá trị luôn được lưu trữ dưới dạng chuỗi. Hãy nhớ chuyển đổi chúng sang định dạng khác khi cần thiết.

Ví dụ sau đếm số lần người dùng nhấp vào một nút. Trong đoạn mã này, chuỗi giá trị được chuyển thành một số để có thể tăng bộ đếm:

if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById(“result”).innerHTML = “You have clicked the button ” +
localStorage.clickcount + ” time(s).”;

Đối tượng sessionStorage

Đối tượng sessionStorage tương đương với đối tượng lưu trữ cục bộ, ngoại trừ lưu trữ dữ liệu chỉ trong một phiên. Dữ liệu sẽ bị xóa khi người dùng đóng tab trình duyệt cụ thể.

Ví dụ sau đếm số lần người dùng nhấp vào một nút, trong phiên hiện tại:

if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById(“result”).innerHTML = “You have clicked the button ” +
sessionStorage.clickcount + ” time(s) in this session.”;