Hướng dẫn how to store data in localstorage in javascript - cách lưu trữ dữ liệu trong localstorage bằng 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.

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));

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));

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));

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));

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

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

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

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));

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

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

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

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));

window.localStorage.getItem('user');

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

window.localStorage.getItem('user');

window.localStorage.getItem('user');

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');

window.localStorage.getItem('user');

window.localStorage.getItem('user');

localStorage Hỗ trợ trình duyệt

• 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.
• Các cặp giá trị khóa biểu thị 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 quá trình tải trang và luôn luôn là 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

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

  9 (nhiều hơn về sau đó).
• 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));

  1 và localStorage. Cả

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

  1 và localStorage đề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));

  1 và localStorage là

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

  1 chỉ duy trì khu vực lưu trữ trong khi trình duyệt được mở (bao gồm cả khi trang tải lại hoặc khôi phục trang) trong khi localStorage 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));

  1 bị xóa khi trang được đóng, dữ liệu được lưu trữ trong localStorage không hết hạn.
• Trong hướng dẫn này, chúng tôi sẽ tập trung vào cách sử dụng localStorage trong JavaScript.
• So sánh NestJS so với Express.js

window.localStorage.getItem('user');

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

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

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

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

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

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

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

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

window.localStorage.getItem('user');

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

window.localStorage.getItem('user');

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');

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');

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.

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í.