Làm cách nào để lấy giá trị mảng lưu trữ cục bộ trong JavaScript?

Điều thú vị về chúng là dữ liệu vẫn tồn tại sau khi làm mới trang [đối với

alert[ localStorage.getItem['test'] ]; // 1

5] và thậm chí khởi động lại toàn bộ trình duyệt [đối với

alert[ localStorage.getItem['test'] ]; // 1

4]. Chúng ta sẽ sớm thấy điều đó

Chúng tôi đã có cookie. Tại sao các đối tượng bổ sung?

• Không giống như cookie, các đối tượng lưu trữ web không được gửi đến máy chủ với mỗi yêu cầu. Do đó, chúng ta có thể lưu trữ nhiều hơn. Hầu hết các trình duyệt hiện đại cho phép ít nhất 5 megabyte dữ liệu [hoặc hơn] và có cài đặt để định cấu hình dữ liệu đó
• Cũng không giống như cookie, máy chủ không thể thao tác với các đối tượng lưu trữ thông qua các tiêu đề HTTP. Mọi thứ được thực hiện trong JavaScript
• Bộ lưu trữ được liên kết với nguồn gốc [bộ ba miền/giao thức/cổng]. Nghĩa là, các giao thức hoặc tên miền phụ khác nhau suy ra các đối tượng lưu trữ khác nhau, chúng không thể truy cập dữ liệu từ nhau

Cả hai đối tượng lưu trữ đều cung cấp các phương thức và thuộc tính giống nhau

• alert[ localStorage.getItem['test'] ]; // 1

  8 – lưu trữ cặp khóa/giá trị

• alert[ localStorage.getItem['test'] ]; // 1

  9 – lấy giá trị theo khóa

• // set key
  localStorage.test = 2;
  
  // get key
  alert[ localStorage.test ]; // 2
  
  // remove key
  delete localStorage.test;

  0 – xóa khóa cùng với giá trị của nó

• // set key
  localStorage.test = 2;
  
  // get key
  alert[ localStorage.test ]; // 2
  
  // remove key
  delete localStorage.test;

  1 – xóa mọi thứ

• // set key
  localStorage.test = 2;
  
  // get key
  alert[ localStorage.test ]; // 2
  
  // remove key
  delete localStorage.test;

  2 – lấy chìa khóa ở một vị trí nhất định

• // set key
  localStorage.test = 2;
  
  // get key
  alert[ localStorage.test ]; // 2
  
  // remove key
  delete localStorage.test;

  3 – số lượng vật phẩm được lưu trữ

Như bạn có thể thấy, nó giống như một bộ sưu tập

// set key
localStorage.test = 2;

// get key
alert[ localStorage.test ]; // 2

// remove key
delete localStorage.test;

4 [

// set key
localStorage.test = 2;

// get key
alert[ localStorage.test ]; // 2

// remove key
delete localStorage.test;

5], nhưng cũng cho phép truy cập theo chỉ mục với

// set key
localStorage.test = 2;

// get key
alert[ localStorage.test ]; // 2

// remove key
delete localStorage.test;

2

Hãy xem nó hoạt động như thế nào

bản trình diễn localStorage

Các tính năng chính của

alert[ localStorage.getItem['test'] ]; // 1

4 là

• Được chia sẻ giữa tất cả các tab và cửa sổ từ cùng một nguồn gốc
• Dữ liệu không hết hạn. Nó vẫn còn sau khi khởi động lại trình duyệt và thậm chí khởi động lại hệ điều hành

Chẳng hạn, nếu bạn chạy mã này…

alert[ localStorage.getItem['test'] ]; // 1

2

…Và đóng/mở trình duyệt hoặc chỉ mở cùng một trang trong một cửa sổ khác, sau đó bạn có thể nhận được như thế này

alert[ localStorage.getItem['test'] ]; // 1

Chúng ta chỉ cần có cùng nguồn gốc [tên miền/cổng/giao thức], đường dẫn url có thể khác nhau

alert[ localStorage.getItem['test'] ]; // 1

4 được chia sẻ giữa tất cả các cửa sổ có cùng nguồn gốc, vì vậy nếu chúng tôi đặt dữ liệu trong một cửa sổ, thay đổi sẽ hiển thị trong một cửa sổ khác

Truy cập giống như đối tượng

Chúng ta cũng có thể sử dụng một cách đối tượng đơn giản để nhận/thiết lập các phím, như thế này

// set key
localStorage.test = 2;

// get key
alert[ localStorage.test ]; // 2

// remove key
delete localStorage.test;

Điều đó được cho phép vì các lý do lịch sử và hầu hết đều có tác dụng, nhưng nhìn chung không được khuyến nghị, bởi vì

1. Nếu khóa do người dùng tạo, thì đó có thể là bất kỳ thứ gì, chẳng hạn như

   // set key
   localStorage.test = 2;
   
   // get key
   alert[ localStorage.test ]; // 2
   
   // remove key
   delete localStorage.test;

   3 hoặc

   alert[ localStorage.getItem['test'] ]; // 1

   70 hoặc một phương thức tích hợp khác của

   alert[ localStorage.getItem['test'] ]; // 1

   4. Trong trường hợp đó,

   alert[ localStorage.getItem['test'] ]; // 1

   72 hoạt động tốt, trong khi quyền truy cập giống như đối tượng không thành công

   alert[ localStorage.getItem['test'] ]; // 1

   7

2. Có một sự kiện

   alert[ localStorage.getItem['test'] ]; // 1

   73, nó kích hoạt khi chúng tôi sửa đổi dữ liệu. Sự kiện đó không xảy ra đối với quyền truy cập giống như đối tượng. Chúng ta sẽ thấy điều đó sau trong chương này

Vòng qua các phím

Như chúng ta đã thấy, các phương thức cung cấp chức năng “get/set/remove by key”. Nhưng làm cách nào để lấy tất cả các giá trị hoặc khóa đã lưu?

Thật không may, các đối tượng lưu trữ không thể lặp lại

Một cách là lặp qua chúng dưới dạng một mảng

alert[ localStorage.getItem['test'] ]; // 1

2

Một cách khác là sử dụng vòng lặp

alert[ localStorage.getItem['test'] ]; // 1

74, giống như chúng ta làm với các đối tượng thông thường

Nó lặp lại các khóa, nhưng cũng xuất ra một số trường tích hợp mà chúng tôi không cần

alert[ localStorage.getItem['test'] ]; // 1

4

…Vì vậy, chúng tôi cần lọc các trường từ nguyên mẫu bằng cách kiểm tra

alert[ localStorage.getItem['test'] ]; // 1

75

alert[ localStorage.getItem['test'] ]; // 1

6

…Hoặc chỉ cần lấy các khóa “riêng” với

alert[ localStorage.getItem['test'] ]; // 1

76 và sau đó lặp lại chúng nếu cần

alert[ localStorage.getItem['test'] ]; // 1

8

Cái sau hoạt động, vì

alert[ localStorage.getItem['test'] ]; // 1

76 chỉ trả về các khóa thuộc về đối tượng, bỏ qua nguyên mẫu

chỉ dây

Xin lưu ý rằng cả khóa và giá trị phải là chuỗi

Nếu chúng là bất kỳ loại nào khác, chẳng hạn như một số hoặc một đối tượng, chúng sẽ tự động được chuyển đổi thành một chuỗi

alert[ localStorage.getItem['test'] ]; // 1

0

Chúng ta có thể sử dụng

alert[ localStorage.getItem['test'] ]; // 1

78 để lưu trữ các đối tượng mặc dù

alert[ localStorage.getItem['test'] ]; // 1

2

Ngoài ra, có thể xâu chuỗi toàn bộ đối tượng lưu trữ, e. g. cho mục đích gỡ lỗi

alert[ localStorage.getItem['test'] ]; // 1

0

phiênStorage

Đối tượng

alert[ localStorage.getItem['test'] ]; // 1

5 được sử dụng ít hơn nhiều so với

alert[ localStorage.getItem['test'] ]; // 1

4

Thuộc tính và phương thức giống nhau, nhưng hạn chế hơn nhiều

• alert[ localStorage.getItem['test'] ]; // 1

  5 chỉ tồn tại trong tab trình duyệt hiện tại
  • Một tab khác có cùng trang sẽ có bộ nhớ khác
  • Nhưng nó được chia sẻ giữa các iframe trong cùng một tab [giả sử chúng đến từ cùng một nguồn gốc]
• Dữ liệu tồn tại khi làm mới trang, nhưng không đóng/mở tab

Hãy xem điều đó trong hành động

Chạy mã này…

alert[ localStorage.getItem['test'] ]; // 1

1

…Sau đó làm mới trang. Bây giờ bạn vẫn có thể lấy dữ liệu

alert[ localStorage.getItem['test'] ]; // 1

2

…Nhưng nếu bạn mở cùng một trang trong một tab khác và thử lại ở đó, đoạn mã trên trả về

alert[ localStorage.getItem['test'] ]; // 1

22, nghĩa là “không tìm thấy gì”

Điều đó chính xác bởi vì

alert[ localStorage.getItem['test'] ]; // 1

5 không chỉ bị ràng buộc với nguồn gốc mà còn với tab trình duyệt. Vì lý do đó,

alert[ localStorage.getItem['test'] ]; // 1

5 được sử dụng ít

sự kiện lưu trữ

Khi dữ liệu được cập nhật trong

alert[ localStorage.getItem['test'] ]; // 1

4 hoặc

alert[ localStorage.getItem['test'] ]; // 1

5, sự kiện lưu trữ sẽ kích hoạt, với các thuộc tính

• alert[ localStorage.getItem['test'] ]; // 1

  27 – khóa đã được thay đổi [

  alert[ localStorage.getItem['test'] ]; // 1

  22 nếu

  alert[ localStorage.getItem['test'] ]; // 1

  29 được gọi]

• alert[ localStorage.getItem['test'] ]; // 1

  40 – giá trị cũ [

  alert[ localStorage.getItem['test'] ]; // 1

  22 nếu khóa mới được thêm vào]

• alert[ localStorage.getItem['test'] ]; // 1

  42 – giá trị mới [

  alert[ localStorage.getItem['test'] ]; // 1

  22 nếu khóa bị xóa]

• alert[ localStorage.getItem['test'] ]; // 1

  44 – url của tài liệu nơi cập nhật xảy ra

• alert[ localStorage.getItem['test'] ]; // 1

  45 – đối tượng

  alert[ localStorage.getItem['test'] ]; // 1

  4 hoặc

  alert[ localStorage.getItem['test'] ]; // 1

  5 nơi cập nhật xảy ra

Điều quan trọng là. sự kiện kích hoạt trên tất cả các đối tượng

alert[ localStorage.getItem['test'] ]; // 1

48 nơi bộ lưu trữ có thể truy cập được, ngoại trừ đối tượng gây ra sự kiện đó

Hãy xây dựng

Hãy tưởng tượng, bạn có hai cửa sổ với cùng một trang trong mỗi cửa sổ. Vì vậy,

alert[ localStorage.getItem['test'] ]; // 1

4 được chia sẻ giữa họ

Bạn có thể muốn mở trang này trong hai cửa sổ trình duyệt để kiểm tra mã bên dưới

Nếu cả hai cửa sổ đang lắng nghe

alert[ localStorage.getItem['test'] ]; // 1

60, thì mỗi cửa sổ sẽ phản ứng với các cập nhật đã xảy ra trong cửa sổ còn lại

alert[ localStorage.getItem['test'] ]; // 1

3

Xin lưu ý rằng sự kiện này cũng chứa.

alert[ localStorage.getItem['test'] ]; // 1

61 – url của tài liệu nơi dữ liệu được cập nhật

Ngoài ra,

alert[ localStorage.getItem['test'] ]; // 1

62 chứa đối tượng lưu trữ – sự kiện này giống nhau đối với cả

alert[ localStorage.getItem['test'] ]; // 1

5 và

alert[ localStorage.getItem['test'] ]; // 1

4, vì vậy

alert[ localStorage.getItem['test'] ]; // 1

62 tham chiếu đối tượng đã được sửa đổi. Chúng tôi thậm chí có thể muốn đặt lại một cái gì đó trong đó, để "phản ứng" với một sự thay đổi

Điều đó cho phép các cửa sổ khác nhau từ cùng một nguồn trao đổi tin nhắn

Các trình duyệt hiện đại cũng hỗ trợ API kênh phát sóng, API đặc biệt dành cho giao tiếp giữa các cửa sổ cùng nguồn gốc, nó có đầy đủ tính năng hơn nhưng ít được hỗ trợ hơn. Có những thư viện polyfill API đó, dựa trên

alert[ localStorage.getItem['test'] ]; // 1

4, làm cho nó có sẵn ở mọi nơi

Làm cách nào để lưu trữ một mảng trong bộ nhớ cục bộ?

Phương pháp nào được sử dụng để lấy giá trị từ bộ nhớ cục bộ?