HTML Lưu trữ cục bộ

HTML Lưu trữ cục bộ: Tốt hơn cookie.

HTML Lưu trữ cục bộ là gì?

qua Lưu trữ cục bộ (Local Storage), ứng dụng web có thể lưu trữ dữ liệu tại địa phương trong trình duyệt người dùng.

Trước khi có HTML5, dữ liệu ứng dụng chỉ có thể lưu trữ trong cookie, bao gồm mỗi yêu cầu máy chủ. Lưu trữ cục bộ an toàn hơn và có thể lưu trữ大量 dữ liệu tại địa phương mà không ảnh hưởng đến hiệu suất của trang web.

Khác với cookie, giới hạn lưu trữ lớn hơn nhiều (tối thiểu 5MB) và thông tin sẽ không được truyền送到 máy chủ.

Lưu trữ cục bộ thông qua nguồn gốc (origin) (qua域 và giao thức). Tất cả các trang, từ nguồn gốc, có thể lưu trữ và truy cập dữ liệu tương tự.

Hỗ trợ trình duyệt

Mảng trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn lưu trữ cục bộ.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Đối tượng lưu trữ cục bộ HTML

HTML lưu trữ cục bộ cung cấp hai đối tượng để lưu trữ dữ liệu trên client:

  • 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 session (dữ liệu sẽ bị mất khi đóng thẻ tab trình duyệt)

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

if (typeof(Storage) !== "undefined") {
    // Mã cho localStorage/sessionStorage
}
    // XIN LÀM ƠI! Không hỗ trợ Web Storage ..
}

Đối tượng localStorage

Đối tượng localStorage lưu trữ dữ liệu không có ngày hết hạn. Khi trình duyệt được đóng, dữ liệu sẽ không bị xóa và vẫn có thể sử dụng được vào ngày hôm sau, tuần hoặc năm.

Mẫu

// Lưu trữ
localStorage.setItem("lastname", "Gates");
// Lấy lại
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Thử ngay

Giải thích ví dụ:

  • Tạo đối tượng tên/giá trị của localStorage, trong đó: name="lastname", value="Gates"
  • Lấy lại giá trị "lastname", và chèn nó vào phần tử có id="result"

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

// Lưu trữ
localStorage.lastname = "Gates";
// Lấy lại
document.getElementById("result").innerHTML = localStorage.lastname;

Cú pháp để xóa mục "lastname" trong localStorage như sau:

localStorage.removeItem("lastname");

Ghi chú: Đối với các cặp tên/giá trị, chúng luôn được lưu trữ dưới dạng chuỗi. Nếu cần, hãy nhớ rằng bạn cần chuyển đổi chúng sang định dạng khác!

Dưới đây là ví dụ minh họa về việc đếm số lần người dùng nhấn nút. Trong mã, chuỗi giá trị được chuyển đổi thành số nguyên, tăng dần theo thứ tự:

Mẫu

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
}
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấn nút này " +
localStorage.clickcount + " lần.";

Thử ngay

Đối tượng sessionStorage

Đối tượng sessionStorage tương đương với đối tượng localStorage, khác biệt duy nhất là chỉ lưu trữ dữ liệu trong một session. Nếu người dùng đóng thẻ trình duyệt cụ thể, dữ liệu cũng sẽ bị xóa.

Dưới đây là ví dụ về việc đếm số lần nhấn nút của người dùng trong session hiện tại:

Mẫu

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Trong session này, bạn đã nhấn nút này " +
sessionStorage.clickcount + " lần.";

Thử ngay