localStorage trong JavaScript: Hướng dẫn đầy đủ – cách xóa localstorage trong javascript

Trang bị cho mình kiến ​​thức và sức mạnh của localStorage trong các ứng dụng JavaScript với năm phương pháp lưu trữ khác nhau này.

Bạn đang xem : cách xóa localstorage trong javascript

Ghi chú của người biên tập: Bài đăng này được cập nhật vào ngày 29 tháng 12 năm 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 Window.localStorage và xem lại các khái niệm cơ bản về lưu trữ web bằng JavaScript.

Chúng tôi sẽ trình bày chi tiết những điều sau:

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

API lưu trữ trên 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 việc 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 nguyên vẹn trong quá trình tải trang và 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 getItem () (sẽ tìm hiểu thêm về điều đó sau).

Sự khác biệt giữa sessionStorage localStorage là gì?

API lưu trữ web bao gồm hai cơ chế: sessionStorage localStorage . Cả sessionStorage localStorage đều duy trì một vùng lưu trữ riêng biệt 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 sessionStorage localStorage sessionStorage chỉ duy trì một vùng lưu trữ trong khi trình duyệt đang mở (kể cả khi trang tải lại hoặc khôi phục) 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 sessionStorage bị xóa khi đóng trang, thì 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.

localStorage trong JavaScript là gì?

localStorage 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ẽ vẫn tồn tại ngay cả khi cửa sổ trình duyệt bị đóng.

Để được cập nhật trực quan về cách sử dụng localStorage trong JavaScript, hãy xem video hướng dẫn bên dưới:

localStorage đượ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 \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ Local Storage trên máy Windows và ~ / Library / Application Support / Google / Chrome / Default / Local Storage trên macOS

Xem Thêm  Phần tử khối HTML và nội tuyến - các phần tử khối thường được hiển thị mà không cần bắt đầu một dòng mới.

Firefox lưu các đối tượng lưu trữ trong tệp SQLite có tên webappsstore.sqlite , tệp này cũng nằm trong thư mục hồ sơ của người dùng.

Window.localStorage là gì?

Cơ chế localStorage có sẵn thông qua thuộc tính Window.localStorage . Window.localStorage là một phần của giao diện Window trong JavaScript, đại diện cho một cửa sổ chứa DOM tài liệu.

Giao diện Window có nhiều chức năng, hàm tạo, đối tượng và không gian tên. Window.localStorage là thuộc tính chỉ đọc trả về một tham chiếu đến đối tượng lưu trữ cục bộ được sử dụng để lưu trữ dữ liệu mà chỉ có thể truy cập vào nguồn gốc đã tạo ra nó.

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

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

  1. setItem () : Thêm khóa và giá trị vào localStorage
  2. getItem () : Đây là cách bạn lấy các mục từ localStorage
  3. removeItem () : Xóa một mục bằng khóa khỏi localStorage
  4. clear () : Xóa tất cả localStorage
  5. key () : Đã chuyển một số để truy xuất khóa của localStorage

setItem () : Cách lưu trữ giá trị trong localStorage

Đúng như tên của nó, phương pháp này cho phép bạn lưu trữ các giá trị trong đối tượng localStorage .

Nó có hai tham số: một khóa và một giá trị. Khóa có thể được tham chiếu sau đó để tìm nạp giá trị được đính kèm với nó.

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

Trong đó name là khóa và Obaseki Nosa là giá trị. Cũng lưu ý rằng localStorage chỉ có thể lưu trữ các 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.

Để thực hiện việc này, chúng tôi sử dụng phương thức JSON.stringify () trước khi chuyển đến setItem () .

 const person = {
    tên: "Obaseki Nosa",
    vị trí: "Lagos",
}

window.localStorage.setItem ('người dùng', JSON.stringify (người)); 

getItem () : Cách lấy các mục từ localStorage

Để lấy các mục từ localStorage, hãy sử dụng phương thức getItem () . getItem () cho phép bạn truy cập dữ liệu được lưu trữ trong đối tượng localStorage của trình duyệt.

getItem () chỉ chấp nhận một tham số, đó là key và trả về giá trị dưới dạng một chuỗi.

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

 window.localStorage.getItem ('người dùng'); 

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

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

Để 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.

Để thực hiện việc này, chúng tôi sử dụng phương thức JSON.parse () , phương thức này sẽ chuyển đổi một chuỗi JSON thành một đối tượng JavaScript.

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

removeItem () : Cách xóa localStorage phiên

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

Khi được chuyển một tên khóa, phương thức removeItem () sẽ xóa khóa đó khỏi bộ nhớ 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 có tác dụng gì.

 window.localStorage.removeItem ('name'); 

clear () : Cách xóa tất cả các mục trong localStorage

Sử dụng phương thức clear () để xóa tất cả các mục trong localStorage .

Phương thức này, khi được gọi, sẽ 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 (); 

key () : Cách lấy tên của khóa trong localStorage

Phương thức key () rất hữu ích trong các trường hợp bạn cần lặp lại các khóa và cho phép bạn chuyển một số hoặc chỉ mục vào localStorage để truy xuất tên của chìa khóa.

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

localStorage hỗ trợ trình duyệt

localStorage như 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. Để đảm bảo trình duyệt hỗ trợ localStorage , bạn có thể kiểm tra bằng đoạn mã sau:

 if (typeof (Storage)! == "undefined") {
    // Mã cho localStorage
    } khác {
    // Không hỗ trợ lưu trữ web.
} 

localStorage giới hạn

Việc sử dụng localStorage dễ dàng như vậy, nhưng cũng rất dễ 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 localStorage :

  • Không lưu trữ thông tin nhạy cảm của người dùng trong localStorage
  • 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
  • localStorage được 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ó 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
  • localStorage là đồng bộ, có nghĩa là mỗi hoạt động được gọi sẽ chỉ thực thi lần lượt
Xem Thêm  Dự án học máy đầu tiên của bạn bằng Python từng bước - học máy trăn đơn giản

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 mình.

: 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 nhiều lỗi của mình thì bạn càng dễ sửa chúng hơn.

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 lại nhật ký bảng điều khiển, thời gian tải trang, tốc độ xếp chồng, 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ế!

.

Chia sẻ cái này:


Xem thêm những thông tin liên quan đến chủ đề cách xóa localstorage trong javascript

How to get, set, and remove item (Javascript Object) from localStorage

alt

  • Tác giả: Mustapha Botchway
  • Ngày đăng: 2020-12-13
  • Đánh giá: 4 ⭐ ( 2294 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video demonstrates how to set an object to the localStorage, get a set object from localStorage and how to remove item from localStorage

Xóa localStorage trong javascript?

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 8508 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có cách nào để thiết lập lại / xóa localStorage của trình duyệt trong javascript không?

Hiểu nhanh về localStorage trong Javascript

  • Tác giả: nodejs.vn
  • Đánh giá: 4 ⭐ ( 9267 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: localStorage là gì ? localStorage trong Javascript có tác dụng gì ? Cách sử dụng của localStorage như thế nào ? ,… Đừng lo lắng trong bài viết ngày hôm nay mình giúp các bạn giải quyết những câu hỏi trên . 1 Local Storage là gì ? Local Storage là một …

Local Storage là gì? 5 lệnh thường dùng trong Local Storage

  • Tác giả: teky.edu.vn
  • Đánh giá: 3 ⭐ ( 2193 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Local Storage là gì? Công cụ này được dùng như một kho lưu trữ những dữ liệu trực tiếp từ trình duyệt của bạn. Cấu tạo của nó rất đơn giản.

Xóa localStorage trong javascript?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7802 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Sử dụng điều này để xóa localStorage: localStorage.clear();

Local Storage với JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 2119 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Local Storage là gì? Tương tự như cookie, HTML5 hỗ trợ LocalStorage là một loại lưu trữ web cho phép các trang web và ứng dụng Javascript lưu trữ và truy cập dữ liệu ngay trong trình duyệt mà không có…

Sử dụng LocalStorage, SessionStorage và Cookie

  • Tác giả: longnv.name.vn
  • Đánh giá: 5 ⭐ ( 4619 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: LocalStorage, SessionStorage và cookie là ba cách lưu trữ dữ liệu khác nhau trong trình duyệt. Bạn dùng nó để lưu trữ thông tin user hoặc tăng tốc website.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Các cách nối hai danh sách trong Python - python concat hai danh sách