Cách hiển thị dữ liệu lưu trữ cục bộ trong html

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng cơ chế

window.localStorage.getItem['user'];

8 và thuộc tính

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

1, đồng thời xem lại kiến ​​thức cơ bản về lưu trữ web trong JavaScript

Chúng tôi sẽ trình bày chi tiết sau đây

• API lưu trữ web là gì?
• Sự khác biệt giữa

  const person = {
      name: "Obaseki Nosa",
      location: "Lagos",
  }
  
  window.localStorage.setItem['user', JSON.stringify[person]];

  2 và

  window.localStorage.getItem['user'];

  8 là gì?

• window.localStorage.getItem['user'];

  8 trong JavaScript là gì?

• window.localStorage.getItem['user'];

  8 được lưu trữ ở đâu?

• const person = {
      name: "Obaseki Nosa",
      location: "Lagos",
  }
  
  window.localStorage.setItem['user', JSON.stringify[person]];

  1 là gì?

• window.localStorage.getItem['user'];

  8 hoạt động như thế nào?

  • const person = {
        name: "Obaseki Nosa",
        location: "Lagos",
    }
    
    window.localStorage.setItem['user', JSON.stringify[person]];

    8. Cách lưu trữ giá trị trong

    window.localStorage.getItem['user'];

    8

  • window.localStorage.getItem['user'];

    0. Cách lấy vật phẩm từ

    window.localStorage.getItem['user'];

    8

  • window.localStorage.getItem['user'];

    2. Cách xóa

    window.localStorage.getItem['user'];

    8 phiên

  • window.localStorage.getItem['user'];

    4. Cách xóa tất cả các mục trong

    window.localStorage.getItem['user'];

    8

  • window.localStorage.getItem['user'];

    6. Cách lấy tên của khóa trong

    window.localStorage.getItem['user'];

    8
• Hỗ trợ trình duyệt

  window.localStorage.getItem['user'];

  8

• window.localStorage.getItem['user'];

  8 giới hạn

API lưu trữ web là gì?

API lưu trữ web là một tập hợp các cơ chế cho phép trình duyệt lưu trữ các cặp khóa-giá trị. Nó được thiết kế trực quan hơn nhiều so với sử dụng cookie

Các cặp khóa-giá trị đại diện cho các đối tượng lưu trữ, tương tự như các đối tượng ngoại trừ chúng vẫn còn nguyên vẹn trong khi tải trang và luôn là các chuỗi. Bạn có thể truy cập các giá trị này như một đối tượng hoặc sử dụng phương thức

window.localStorage.getItem['user'];

0 [sẽ nói thêm về điều đó sau]

Sự khác biệt giữa

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

2 và

window.localStorage.getItem['user'];

8 là gì?

API lưu trữ web bao gồm hai cơ chế.

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

2 và

window.localStorage.getItem['user'];

8. Cả

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

2 và

window.localStorage.getItem['user'];

8 đều duy trì một khu vực lưu trữ riêng cho từng nguồn gốc có sẵn trong suốt thời gian của phiên trang

Sự khác biệt chính giữa

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

2 và

window.localStorage.getItem['user'];

8 là

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

2 chỉ duy trì một vùng lưu trữ khi trình duyệt đang mở [kể cả khi trang tải lại hoặc khôi phục] trong khi

window.localStorage.getItem['user'];

8 tiếp tục lưu trữ dữ liệu sau khi đóng trình duyệt. Nói cách khác, trong khi dữ liệu được lưu trữ trong

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

2 bị xóa khi đóng trang, dữ liệu được lưu trữ trong

window.localStorage.getItem['user'];

8 không hết hạn

Trong hướng dẫn này, chúng ta sẽ tập trung vào cách sử dụng

window.localStorage.getItem['user'];

8 trong JavaScript

window.localStorage.getItem['user'];

8 trong JavaScript là gì?

window.localStorage.getItem['user'];

8 là thuộc tính cho phép các trang web và ứng dụng JavaScript lưu các cặp khóa-giá trị trong trình duyệt web mà không có ngày hết hạn. Điều này có nghĩa là dữ liệu được lưu trữ trong trình duyệt sẽ tồn tại ngay cả sau khi đóng cửa sổ trình duyệt

Để xem lại hình ảnh về cách sử dụng

window.localStorage.getItem['user'];

8 trong JavaScript, hãy xem video hướng dẫn bên dưới

window.localStorage.getItem['user'];

8 được lưu trữ ở đâu?

Trong Google Chrome, dữ liệu lưu trữ web được lưu trong tệp SQLite trong thư mục con trong hồ sơ của người dùng. Thư mục con được đặt tại

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

58 trên máy Windows và

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

59 trên macOS

Firefox lưu các đối tượng lưu trữ trong tệp SQLite có tên là

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

70, tệp này cũng nằm trong thư mục hồ sơ của người dùng

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

1 là gì?

Cơ chế

window.localStorage.getItem['user'];

8 có sẵn thông qua thuộc tính

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

73.

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

1 là một phần của giao diện

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

75 trong JavaScript, đại diện cho một cửa sổ chứa tài liệu DOM

Giao diện

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

76 có nhiều chức năng, hàm tạo, đối tượng và không gian tên.

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

1 là thuộc tính chỉ đọc trả về tham chiếu đến đối tượng lưu trữ cục bộ được sử dụng để lưu trữ dữ liệu chỉ có thể truy cập được vào nguồn gốc đã tạo ra nó

window.localStorage.getItem['user'];

8 hoạt động như thế nào?

Để sử dụng

window.localStorage.getItem['user'];

8 trong các ứng dụng web của bạn, có năm phương pháp để lựa chọn

1. const person = {
       name: "Obaseki Nosa",
       location: "Lagos",
   }
   
   window.localStorage.setItem['user', JSON.stringify[person]];

   8. Thêm khóa và giá trị vào

   window.localStorage.getItem['user'];

   8

2. window.localStorage.getItem['user'];

   0. Đây là cách bạn nhận được các mục từ

   window.localStorage.getItem['user'];

   8

3. window.localStorage.getItem['user'];

   2. Xóa một mục bằng phím khỏi

   window.localStorage.getItem['user'];

   8

4. window.localStorage.getItem['user'];

   4. Xóa tất cả

   window.localStorage.getItem['user'];

   8

5. window.localStorage.getItem['user'];

   6. Đã vượt qua một số để lấy chìa khóa của

   window.localStorage.getItem['user'];

   8

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

8. Cách lưu trữ giá trị trong

window.localStorage.getItem['user'];

8

Đúng như tên gọi, phương thức này cho phép bạn lưu trữ các giá trị trong đối tượng

window.localStorage.getItem['user'];

8

Phải mất hai tham số. một khóa và một giá trị. Khóa có thể được tham chiếu sau để lấy giá trị được đính kèm với nó

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

0

Trong đó

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

13 là khóa và

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

14 là giá trị. Cũng lưu ý rằng

window.localStorage.getItem['user'];

8 chỉ có thể lưu trữ chuỗi

Để lưu trữ mảng hoặc đối tượng, bạn sẽ phải chuyển đổi chúng thành chuỗi

Để làm điều này, chúng tôi sử dụng phương pháp

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

16 trước khi chuyển đến

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

8

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

window.localStorage.getItem['user'];

0. Cách lấy vật phẩm từ

window.localStorage.getItem['user'];

8

Để lấy các mục từ localStorage, hãy sử dụng phương pháp

window.localStorage.getItem['user'];

0.

window.localStorage.getItem['user'];

0 cho phép bạn truy cập dữ liệu được lưu trữ trong đối tượng

window.localStorage.getItem['user'];

8 của trình duyệt

window.localStorage.getItem['user'];

0 chỉ chấp nhận một tham số, đó là

window.localStorage.getItem['user'];

04 và trả về

window.localStorage.getItem['user'];

05 dưới dạng chuỗi

Để truy xuất khóa người dùng

window.localStorage.getItem['user'];

Điều này trả về một chuỗi có giá trị là

window.localStorage.getItem['user'];

3

Để sử dụng giá trị này, bạn sẽ phải chuyển đổi nó trở lại thành một đối tượng

Để làm điều này, chúng tôi sử dụng phương thức

window.localStorage.getItem['user'];

06, phương thức này chuyển đổi chuỗi JSON thành đối tượng JavaScript

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

5

window.localStorage.getItem['user'];

2. Cách xóa

window.localStorage.getItem['user'];

8 phiên

Để xóa các phiên lưu trữ cục bộ, hãy sử dụng phương pháp

window.localStorage.getItem['user'];

2

Khi được truyền một tên khóa, phương thức

window.localStorage.getItem['user'];

2 sẽ xóa khóa đó khỏi bộ lưu trữ nếu nó tồn tại. Nếu không có mục nào được liên kết với khóa đã cho, phương pháp này sẽ không làm gì cả

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

7

window.localStorage.getItem['user'];

4. Cách xóa tất cả các mục trong

window.localStorage.getItem['user'];

8

Sử dụng phương pháp

window.localStorage.getItem['user'];

4 để xóa tất cả các mục trong

window.localStorage.getItem['user'];

8

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

Phương thức này, khi được gọi, sẽ xóa toàn bộ bộ nhớ của tất cả các bản ghi cho miền đó. Nó không nhận được bất kỳ tham số nào

window.localStorage.getItem['user'];

2

window.localStorage.getItem['user'];

6. Cách lấy tên của khóa trong

window.localStorage.getItem['user'];

8

Phương thức

window.localStorage.getItem['user'];

6 có ích trong trường hợp bạn cần lặp qua các khóa và cho phép bạn chuyển một số hoặc chỉ mục tới

window.localStorage.getItem['user'];

8 để truy xuất tên của khóa

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

1

Hỗ trợ trình duyệt

window.localStorage.getItem['user'];

8

window.localStorage.getItem['user'];

8 dưới dạng một loại lưu trữ web là một đặc điểm kỹ thuật của HTML5. Nó được hỗ trợ bởi các trình duyệt chính bao gồm IE8. Để chắc chắn rằng trình duyệt hỗ trợ

window.localStorage.getItem['user'];

8, bạn có thể kiểm tra bằng đoạn mã sau

window.localStorage.getItem['user'];

0

window.localStorage.getItem['user'];

8 giới hạn

Dễ dàng sử dụng

window.localStorage.getItem['user'];

8, nhưng cũng dễ dàng sử dụng sai. Sau đây là những hạn chế và cũng là những cách KHÔNG sử dụng

window.localStorage.getItem['user'];

8

• Không lưu trữ thông tin nhạy cảm của người dùng trong

  window.localStorage.getItem['user'];

  8
• Nó không thể thay thế cho cơ sở dữ liệu dựa trên máy chủ vì thông tin chỉ được lưu trữ trên trình duyệt

• window.localStorage.getItem['user'];

  8 được giới hạn ở 5 MB trên tất cả các trình duyệt chính

• window.localStorage.getItem['user'];

  8 khá không an toàn vì nó không có hình thức bảo vệ dữ liệu và có thể được truy cập bằng bất kỳ mã nào trên trang web của bạn

• window.localStorage.getItem['user'];

  8 là đồng bộ, nghĩa là mỗi thao tác được gọi sẽ chỉ thực hiện lần lượt từng thao tác

Với những thứ này, chúng tôi đã được trang bị sức mạnh của

const person = {
    name: "Obaseki Nosa",
    location: "Lagos",
}

window.localStorage.setItem['user', JSON.stringify[person]];

09 trong các ứng dụng web của mình

Đăng NhậpTên Lửa. Gỡ lỗi JavaScript dễ dàng hơn bằng cách hiểu ngữ cảnh

Gỡ lỗi mã luôn là một công việc tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ sửa chúng

LogRocket cho phép bạn hiểu những lỗi này theo những cách mới và độc đáo. Giải pháp giám sát giao diện người dùng của chúng tôi theo dõi mức độ tương tác của người dùng với giao diện người dùng JavaScript của bạn để cung cấp cho bạn khả năng tìm ra chính xác những gì người dùng đã làm dẫn đến lỗi

LogRocket ghi nhật ký bảng điều khiển, thời gian tải trang, dấu vết ngăn xếp, yêu cầu/phản hồi mạng chậm với tiêu đề + nội dung, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn thế

Làm cách nào để hiển thị giá trị lưu trữ cục bộ trong HTML?

Chúng tôi có thể sử dụng localStorage trong HTML không?

Dữ liệu lưu trữ cục bộ HTML là gì?

Làm cách nào để hiển thị dữ liệu từ localStorage trong bảng trong JavaScript?