Hướng dẫn how can write local storage in javascript? - làm thế nào có thể viết lưu trữ cục bộ trong javascript?

Biên tập viên Lưu ý: Bài đăng này được cập nhật vào ngày 29 tháng 12 năm 2020. This post was updated on 29 December 2020.

Show

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

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

window.localStorage.setItem('user', JSON.stringify(person));
0 và xem xét những điều cơ bản của lưu trữ web trong JavaScript.

Chúng tôi sẽ đề cập chi tiết như sau:

  • 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));
    1 và localStorage là gì?
  • localStorage trong JavaScript là gì?
  • localStorage được lưu trữ ở đâu?
  • const person = {
        name: "Obaseki Nosa",
        location: "Lagos",
    }
    
    window.localStorage.setItem('user', JSON.stringify(person));
    0 là gì?
  • localStorage hoạt động như thế nào?
    • const person = {
          name: "Obaseki Nosa",
          location: "Lagos",
      }
      
      window.localStorage.setItem('user', JSON.stringify(person));
      7: Cách lưu trữ giá trị trong localStorage
    • const person = {
          name: "Obaseki Nosa",
          location: "Lagos",
      }
      
      window.localStorage.setItem('user', JSON.stringify(person));
      9: Cách lấy các mặt hàng từ localStorage
    • window.localStorage.getItem('user');
      1: Cách xóa các phiên localStorage
    • window.localStorage.getItem('user');
      3: Cách & NBSP; Xóa tất cả các mục trong localStorage
    • window.localStorage.getItem('user');
      5: Cách lấy tên của khóa trong localStorage
  • localStorage Hỗ trợ trình duyệt
  • localStorage Hạn chế

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));
1 và localStorage là gì?

localStorage trong JavaScript là gì?

Sự khác biệt giữa const person = { name: "Obaseki Nosa", location: "Lagos", } window.localStorage.setItem('user', JSON.stringify(person));1 và localStorage là gì?

localStorage trong JavaScript là gì?

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

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

window.localStorage.setItem('user', JSON.stringify(person));
0 là gì?

localStorage trong JavaScript là gì?

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

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

window.localStorage.setItem('user', JSON.stringify(person));
0 là gì?

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

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

window.localStorage.setItem('user', JSON.stringify(person));
0 là gì?

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

const person = { name: "Obaseki Nosa", location: "Lagos", } window.localStorage.setItem('user', JSON.stringify(person));0 là gì?

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

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

window.localStorage.setItem('user', JSON.stringify(person));
7: Cách lưu trữ giá trị trong localStorage

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

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

window.localStorage.setItem('user', JSON.stringify(person));
7: Cách lưu trữ giá trị trong localStorage

  1. const person = {
        name: "Obaseki Nosa",
        location: "Lagos",
    }
    
    window.localStorage.setItem('user', JSON.stringify(person));
    9: Cách lấy các mặt hàng từ localStorage
  2. window.localStorage.getItem('user');
    1: Cách xóa các phiên localStorage
  3. window.localStorage.getItem('user');
    3: Cách & NBSP; Xóa tất cả các mục trong localStorage
  4. window.localStorage.getItem('user');
    5: Cách lấy tên của khóa trong localStorage
  5. localStorage Hỗ trợ trình duyệt

const person = { name: "Obaseki Nosa", location: "Lagos", } window.localStorage.setItem('user', JSON.stringify(person));7: Cách lưu trữ giá trị trong localStorage

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

window.localStorage.setItem('user', JSON.stringify(person));
9: Cách lấy các mặt hàng từ localStorage

window.localStorage.getItem('user');
1: Cách xóa các phiên localStorage

window.localStorage.setItem('name', 'Obaseki Nosa');

window.localStorage.getItem('user');
3: Cách & NBSP; Xóa tất cả các mục trong localStorage

window.localStorage.getItem('user');
5: Cách lấy tên của khóa trong localStorage

localStorage Hỗ trợ trình duyệt

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

window.localStorage.setItem('user', JSON.stringify(person));

const person = { name: "Obaseki Nosa", location: "Lagos", } window.localStorage.setItem('user', JSON.stringify(person));9: Cách lấy các mặt hàng từ localStorage

window.localStorage.getItem('user');
1: Cách xóa các phiên localStorage

window.localStorage.getItem('user');
3: Cách & NBSP; Xóa tất cả các mục trong localStorage

window.localStorage.getItem('user');
5: Cách lấy tên của khóa trong localStorage

window.localStorage.getItem('user');

localStorage Hỗ trợ trình duyệt

“{“name”:”Obaseki Nosa”,”location”:”Lagos”}”

localStorage Hạn chế

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

JSON.parse(window.localStorage.getItem('user'));

window.localStorage.getItem('user');1: Cách xóa các phiên localStorage

window.localStorage.getItem('user');
3: Cách & NBSP; Xóa tất cả các mục trong localStorage

window.localStorage.getItem('user');
5: Cách lấy tên của khóa trong localStorage

window.localStorage.removeItem('name');

window.localStorage.getItem('user');3: Cách xóa tất cả các mục trong localStorage

Sử dụng phương thức

window.localStorage.getItem('user');
3 để xóa tất cả các mục trong localStorage.


Nhiều bài viết tuyệt vời hơn từ Logrocket:

  • Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
  • Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
  • Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
  • Chuyển đổi giữa nhiều phiên bản của nút
  • Khám phá cách làm động ứng dụng ứ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 nhị phân
  • So sánh NestJS so với Express.js

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

window.localStorage.clear();

window.localStorage.getItem('user');5: Cách lấy tên của khóa trong localStorage

Phương pháp

window.localStorage.getItem('user');
5 có ích trong các tình huống mà bạn cần lặp qua các phím và cho phép bạn chuyển một số hoặc chỉ mục cho localStorage để lấy tên của khóa.

var KeyName = window.localStorage.key(index);

localStorage Hỗ trợ trình duyệt

localStorage Là một loại lưu trữ web là một đặc tả 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ợ localStorage, bạn có thể kiểm tra bằng đoạn trích sau:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage
    } else {
    // No web storage Support.
}

localStorage Hạn chế

Dễ dàng như sử dụng localStorage, cũng dễ dàng sử dụng sai. Sau đây là những hạn chế và cũng là cách để không sử dụng localStorage:

  • Không lưu trữ thông tin người dùng nhạy cảm trong localStorage
  • Nó không phải là một sự 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
  • localStorage bị giới hạn ở 5MB trên tất cả các trình duyệt chính
  • localStorage khá không an toàn vì nó không có dạng 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
  • localStorage là đồng bộ, có nghĩa là mỗi thao tác được gọi sẽ chỉ thực hiện lần lượt

Với những điều này, chúng tôi đã được trang bị sức mạnh của localStorage trong các ứng dụng web của chúng tôi.

Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnh

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

Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi.

Hướng dẫn how can write local storage in javascript? - làm thế nào có thể viết lưu trữ cục bộ trong javascript?

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

Hãy thử nó miễn phí.

Làm thế nào để bạn xác định lưu trữ cục bộ trong JavaScript?

LocalStorage trong JavaScript là gì? LocalStorage là một thuộc tính cho phép các trang web và ứng dụng JavaScript lưu các cặp giá trị khóa 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 cửa sổ trình duyệt được đóng.a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.

JavaScript có thể truy cập lưu trữ cục bộ không?

Cơ chế địa phương cung cấp một loại đối tượng lưu trữ web cho phép bạn lưu trữ và truy xuất dữ liệu trong trình duyệt.Bạn có thể lưu trữ và truy cập dữ liệu mà không cần hết hạn;Dữ liệu sẽ có sẵn ngay cả sau khi khách truy cập đóng trang web của bạn.Thông thường bạn sẽ truy cập LocalStorage bằng JavaScript.You'll normally access localStorage using JavaScript.

Tôi có thể đặt một đối tượng trong JavaScript LocalStorage không?

Tóm lại, chúng ta có thể lưu trữ các đối tượng JavaScript trong LocalStorage bằng cách trước tiên chuyển đổi chúng thành các chuỗi bằng phương thức JSON.Stringify, sau đó quay lại các đối tượng bằng phương thức JSON.Parse.we can store JavaScript objects in localStorage by first converting them to strings with the JSON. stringify method, then back to objects with the JSON. parse method.

Làm cách nào để xem lưu trữ cục bộ trong JavaScript?

# Xem các khóa và giá trị LocalStorage Nhấp vào tab Ứng dụng để mở bảng ứng dụng.Mở rộng menu lưu trữ cục bộ.Nhấp vào một miền để xem các cặp giá trị khóa của nó.Nhấp vào một hàng của bảng để xem giá trị trong trình xem bên dưới bảng.Click the Application tab to open the Application panel. Expand the Local Storage menu. Click a domain to view its key-value pairs. Click a row of the table to view the value in the viewer below the table.