API lưu trữ web: lưu trữ cục bộ và lưu trữ phiên

API lưu trữ web cung cấp một cách để lưu trữ dữ liệu trong trình duyệt. Nó xác định hai cơ chế lưu trữ rất quan trọng: Lưu trữ phiên và Lưu trữ cục bộ, một phần của tập hợp các tùy chọn lưu trữ có sẵn trên Nền tảng web

Giới thiệu

API lưu trữ web xác định hai cơ chế lưu trữ rất quan trọng:Lưu trữ phiênvàLưu trữ cục bộ.

Chúng là một phần của tập hợp các tùy chọn lưu trữ có sẵn trên Nền tảng Web, bao gồm:

Bộ đệm ứng dụng không được dùng nữa và Web SQL không được triển khai trong Firefox, Edge và IE.

Cả Bộ nhớ Phiên và Bộ nhớ Cục bộ đều cung cấp một khu vực riêng tư cho dữ liệu của bạn. Bất kỳ dữ liệu nào bạn lưu trữ không thể được truy cập bởi các trang web khác.

Session Storage duy trì dữ liệu được lưu trữ trong đó trong suốt thời gian của phiên trang. Nếu nhiều cửa sổ hoặc tab truy cập cùng một trang web, chúng sẽ có hai phiên bản Lưu trữ phiên khác nhau.

Khi một tab / cửa sổ bị đóng, Bộ nhớ Phiên cho tab / cửa sổ cụ thể đó sẽ bị xóa.

Lưu trữ phiên có nghĩa là cho phép kịch bản xử lý các quy trình khác nhau xảy ra trên cùng một trang web một cách độc lập, chẳng hạn như cookie được chia sẻ trong tất cả các phiên.

Thay vào đó, Local Storage vẫn tồn tại dữ liệu cho đến khi dữ liệu đó bị xóa rõ ràng bởi bạn hoặc bởi người dùng. Nó không bao giờ được dọn dẹp tự động và nó được chia sẻ trong tất cả các phiên truy cập vào một trang web.

Cả Bộ nhớ Cục bộ và Bộ nhớ Phiên đềugiao thức cụ thể: dữ liệu được lưu trữ khi trang được truy cập bằnghttpkhông khả dụng khi trang được phân phát vớihttps, và ngược lại.

Bộ nhớ Web chỉ có thể truy cập được trong trình duyệt. Nó không được gửi đến máy chủ như cookie.

Cách truy cập bộ nhớ

Cả bộ nhớ cục bộ và bộ nhớ phiên đều có sẵn trênwindowđối tượng, vì vậy bạn có thể truy cập chúng bằng cách sử dụngsessionStoragevàlocalStorage.

Tập hợp các thuộc tính và phương thức của chúng hoàn toàn giống nhau, bởi vì chúng trả về cùng một đối tượng,Lưu trữvật.

Đối tượng lưu trữ có một thuộc tính duy nhất,length, là số lượng mục dữ liệu được lưu trữ trong đó.

Phương pháp

`setItem(key, value)`

setItem()thêm một mục vào bộ nhớ. Chấp nhận một chuỗi làm khóa và một chuỗi dưới dạng giá trị:

localStorage.setItem('username', 'flaviocopes')
localStorage.setItem('id', '123')

Nếu bạn chuyển bất kỳ giá trị nào không phải là một chuỗi, nó sẽ được chuyển đổi thành chuỗi:

localStorage.setItem('test', 123) //stored as the '123' string
localStorage.setItem('test', { test: 1 }) //stored as "[object Object]"

`getItem(key)`

getItem()là cách để lấy một giá trị chuỗi từ bộ lưu trữ, bằng cách sử dụng chuỗi khóa đã được sử dụng để lưu trữ nó:

localStorage.getItem('username') // 'flaviocopes'
localStorage.getItem('id') // '123'

`removeItem(key)`

removeItem()loại bỏ mục được xác định bởikeytừ bộ nhớ, không trả lại gì (anundefinedgiá trị):

localStorage.removeItem('id')

`key(n)`

Mỗi mặt hàng bạn lưu trữ đều có số chỉ mục.

Nó có thể xuất hiện số liên tiếp, vì vậy lần đầu tiên bạn sử dụngsetItem(), mục đó có thể được tham chiếu bằng cách sử dụngkey(0), tiếp theo vớikey(1)và như vậy, nhưng nó không phải. MDN cho biết “Thứ tự của các khóa là do tác nhân người dùng xác định, vì vậy bạn không nên dựa vào nó”.

Nếu bạn tham chiếu một số không trỏ đến một mục lưu trữ, nó sẽ trả vềnull.

`clear()`

clear()xóa mọi thứ khỏi đối tượng lưu trữ mà bạn đang thao tác:

localStorage.setItem('a', 'a')
localStorage.setItem('b', 'b')
localStorage.length //2
localStorage.clear()
localStorage.length //0

Giới hạn kích thước bộ nhớ

Thông qua API lưu trữ, bạn có thể lưu trữ nhiều dữ liệu hơn những gì bạn có thể làm với cookie.

Dung lượng lưu trữ có sẵn trên Web có thể khác nhau theo loại lưu trữ (cục bộ hoặc phiên), trình duyệt và theo loại thiết bị. Anghiên cứubởi html5rocks.com chỉ ra những giới hạn đó:

Máy tính để bàn

Chrome, IE, Firefox: 10MB
Safari: 5MB cho bộ nhớ cục bộ, bộ nhớ phiên không giới hạn

Di động

Chrome, Firefox: 10MB
iOS Safari và WebView: 5MB cho bộ nhớ cục bộ, bộ nhớ phiên không giới hạn trừ khi trong iOS6 và iOS7 có 5MB
Trình duyệt Android: bộ nhớ cục bộ 2MB, bộ nhớ phiên không giới hạn

Vượt quá hạn ngạch

Bạn cần xử lý lỗi hạn ngạch, đặc biệt nếu bạn lưu trữ nhiều dữ liệu. Bạn có thể làm như vậy bằng cách thử / nắm bắt:

try {
  localStorage.setItem('key', 'value')
} catch (domException) {
  if (
    ['QuotaExceededError', 'NS_ERROR_DOM_QUOTA_REACHED'].includes(
      domException.name
    )
  ) {
    // handle quota limit exceeded error
  }
}

Những công cụ phát triển

Công cụ DevTools của các trình duyệt chính đều cung cấp giao diện đẹp mắt để kiểm tra và thao tác dữ liệu được lưu trữ trong Bộ nhớ cục bộ và Bộ nhớ phiên.

Trình duyệt Chrome

Chrome DevTools local storage

Firefox

Firefox DevTools local storage

Safari

Safari DevTools local storage

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript