API lưu trữ web trong HTML - HTML Web Storage API

HTML Web Storage là gì?

Với web storage, các ứng dụng web có thể lưu trữ dữ liệu một cách 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 cookies, được bao gồm trong mỗi yêu cầu của máy chủ. Web storage an toàn hơn và có thể lưu trữ lượng lớn dữ liệu cục bộ mà không ảnh hưởng đến hiệu suất của trang web.

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

Web storage là theo nguồn gốc (theo tên 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.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Web Storage.

Đối tượng HTML Web Storage

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

Trước khi sử dụng web storage, kiểm tra hỗ trợ trình duyệt cho localStorage và sessionStorage:

if (typeof(Storage) !== "undefined") {

      // Code cho localStorage/sessionStorage.

} else {

      // Xin lỗi! Không hỗ trợ Web Storage.

}

Đố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 được đóng và sẽ có sẵn vào ngày tiếp theo, tuần tiếp theo hoặc năm tiếp theo.

Ví dụ:

// Lưu trữ

localStorage.setItem("lastname", "Smith");

// Lấy ra

document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Giải thích ví dụ:

Tạo một cặp tên/giá trị localStorage với tên="lastname" và giá trị="Smith"

Lấy ra 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:

// Lưu trữ

localStorage.lastname = "Smith";

// Lấy ra

document.getElementById("result").innerHTML = localStorage.lastname;

Cú pháp để xóa mục localStorage "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. 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 mã này, chuỗi giá trị được chuyển đổi 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 = "Bạn đã nhấp vào nút " + localStorage.clickcount + " lần.";

Đối tượng sessionStorage

Đối tượng sessionStorage tương đương với đối tượng localStorage, ngoại trừ việc nó lưu trữ dữ liệu chỉ cho 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ụ:

if (sessionStorage.clickcount) {

      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else {

      sessionStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "Bạn đã nhấp vào nút " + sessionStorage.clickcount + " lần trong phiên này.";