Giới thiệu về localStorage và sessionStorage

---

localStorage và sessionStorage , một phần của API lưu trữ web, là hai công cụ tuyệt vời để lưu các cặp khóa / giá trị local .

Cả localStorage và sessionStorage đều cung cấp những lợi thế so với việc sử dụng cookie:

• Dữ liệu chỉ được lưu local và server không thể đọc được, điều này giúp loại bỏ vấn đề bảo mật mà cookie gây ra.
• Nó cho phép lưu nhiều dữ liệu hơn ( 10Mb cho hầu hết các trình duyệt).
• Nó đơn giản hơn để sử dụng và cú pháp rất đơn giản.

Nó cũng được hỗ trợ trong tất cả các trình duyệt hiện đại, vì vậy bạn có thể sử dụng nó ngay hôm nay mà không gặp sự cố. Rõ ràng, vì không thể đọc dữ liệu trên server , nên cookie vẫn có thể sử dụng, đặc biệt là khi xác thực.

localStorage so với sessionStorage

localStorage và sessionStorage hoàn thành điều tương tự và có cùng một API, nhưng với sessionStorage, dữ liệu chỉ được duy trì cho đến khi cửa sổ hoặc tab được đóng, trong khi với localStorage, dữ liệu được duy trì cho đến khi user xóa thủ công bộ nhớ cache của trình duyệt hoặc cho đến khi ứng dụng web của bạn xóa dữ liệu. Các ví dụ trong bài đăng này dành cho localStorage, nhưng cú pháp tương tự hoạt động cho sessionStorage.

Tạo mục nhập

Tạo các mục nhập cặp khóa / giá trị với localStorage.setItem , cung cấp khóa và giá trị:

let key = 'Item 1';
localStorage.setItem(key, 'Value');

Đọc các mục

Đọc các mục nhập với localStorage.getItem :

let myItem = localStorage.getItem(key);

Cập nhật mục nhập

Cập nhật một mục nhập giống như bạn sẽ tạo một mục mới với setItem , nhưng với một khóa đã tồn tại:

localStorage.setItem(key, 'New Value');

Xóa mục nhập

Xóa mục nhập bằng phương thức removeItem :

localStorage.removeItem(key);

Xóa mọi thứ

Đây là cách xóa mọi thứ được lưu trữ trong localStorage:

localStorage.clear();

Lưu trữ các đối tượng Json

Chỉ các chuỗi có thể được lưu trữ bằng localStorage hoặc sessionStorage, nhưng bạn có thể sử dụng JSON.stringify để lưu trữ các đối tượng phức tạp hơn và JSON.parse để đọc chúng:

// Create item:
let myObj = { name: 'Skip', breed: 'Labrador' };
localStorage.setItem(key, JSON.stringify(myObj));

// Read item:
let item = JSON.parse(localStorage.getItem(key));

Kiểm tra các mặt hàng

Đây là cách bạn có thể kiểm tra sự hiện diện của các mục trong loclaStorage:

if (localStorage.length > 0) {
  // We have items
} else {
  // No items
}

Kiểm tra hỗ trợ

Kiểm tra hỗ trợ localStorage bằng cách kiểm tra xem nó có sẵn trên đối tượng window hay không :

if (window.localStorage) {
  // localStorage supported
}

Lặp lại các mục

localStorage hoặc sessionStorage không có phương thức forEach , nhưng bạn có thể lặp lại các mục có vòng lặp for cũ tốt:

for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(key, value);
}

Hỗ trợ trình duyệt

Tôi có thể sử dụng lưu trữ giá trị tên không? Dữ liệu về hỗ trợ tính năng lưu trữ giá trị tên trên các trình duyệt chính từ caniuse.com.

---

---

Các tin liên quan