Lưu trữ cục bộ HTML

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

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

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

Trước HTML5, dữ liệu ứng dụng chỉ có thể được 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 trên cục bộ 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 không được truyền送到 máy chủ.

Lưu trữ cục bộ thông qua nguồn gốc (origin) (qua miền 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 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 session (dữ liệu sẽ bị mất khi đóng thẻ 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 mai, tuần hoặc năm sau.

Mô hình

// 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 cặp tên/giá trị trong 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ể 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 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ớ chuyển đổi chúng sang định dạng khác!

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

Mô hình

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ô hình

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