Làm cách nào để kiểm tra bộ nhớ 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

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…

localStorage.setItem['test', 1];

…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

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

   let key = 'length';
   localStorage[key] = 5; // Error, can't assign length

   0 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 đó,

   let key = 'length';
   localStorage[key] = 5; // Error, can't assign length

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

   let key = 'length';
   localStorage[key] = 5; // Error, can't assign length

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

   let key = 'length';
   localStorage[key] = 5; // Error, can't assign length

   3, 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

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

for[let i=0; i