Web Storage API

Web Storage API là một ngôn ngữ ngữ pháp đơn giản để lưu trữ và truy xuất dữ liệu trong trình duyệt. Nó rất dễ sử dụng:

Thực thể

localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");

Thử nghiệm trực tiếp

Tất cả các trình duyệt đều hỗ trợ Web Storage API:

Chrome IE Firefox Safari Opera
Chrome IE/Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Đối tượng localStorage

Đối tượng localStorage cung cấp truy cập vào lưu trữ cục bộ của trang web cụ thể. Nó cho phép bạn lưu trữ, đọc, thêm, sửa đổi và xóa mục dữ liệu của域 này.

Dữ liệu lưu trữ không có ngày hết hạn và sẽ không bị xóa khi trình duyệt đóng.

Dữ liệu này sẽ có thể truy cập được trong vài ngày, tuần và năm.

Phương thức setItem()

Phương thức localStorage.setItem() lưu trữ mục dữ liệu trong storage.

Nó chấp nhận một tên và một giá trị làm tham số:

Thực thể

localStorage.setItem("name", "Bill Gates");

Phương thức getItem()

Phương thức localStorage.getItem() lấy dữ liệu mục từ lưu trữ (storage).

Nó chấp nhận một tên làm tham số:

Thực thể

localStorage.getItem("name");

Đối tượng sessionStorage

Đối tượng sessionStorage tương tự như đối tượng localStorage.

Khác biệt nằm ở đối tượng sessionStorage lưu trữ dữ liệu của phiên làm việc.

Dữ liệu sẽ bị xóa khi trình duyệt đóng.

Thực thể

sessionStorage.getItem("name");

Thử nghiệm trực tiếp

Phương thức setItem()

Phương thức sessionStorage.setItem() lưu trữ mục dữ liệu trong lưu trữ (storage).

Nó chấp nhận một tên và một giá trị làm tham số:

Thực thể

sessionStorage.setItem("name", "Bill Gates");

Phương thức getItem()

Phương thức sessionStorage.getItem() lấy dữ liệu mục từ lưu trữ (storage).

Nó chấp nhận một tên làm tham số:

Thực thể

sessionStorage.getItem("name");

Thuộc tính và phương thức của đối tượng Storage

Thuộc tính/Phương thức Mô tả
key(n) Trả về tên của khóa lưu trữ thứ n.
length Trả về số lượng mục dữ liệu được lưu trữ trong đối tượng Storage.
getItem(keyname) Trả về giá trị của khóa được chỉ định.
setItem(keyname, value) Thêm khóa vào lưu trữ, hoặc nếu khóa đã tồn tại, cập nhật giá trị của khóa.
removeItem(keyname) Xóa khóa này khỏi lưu trữ.
clear() Xóa tất cả các khóa.

Trang liên quan đến Web Storage API

Thuộc tính Mô tả
window.localStorage Cho phép lưu trữ cặp khóa/giá trị trong trình duyệt Web. Lưu trữ dữ liệu không có ngày hết hạn.
window.sessionStorage Cho phép lưu trữ cặp khóa/giá trị trong trình duyệt Web. Lưu trữ dữ liệu của một phiên.