Cách sử dụng localStorage trong JavaScript

Cách sử dụng localStorage trong JavaScript

Cơ chế localStorage 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 bị hết hạn sử dụng; 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. Với một lượng nhỏ mã, bạn có thể xây dựng một dự án mẫu, giống như một bộ đếm điểm. Điều này sẽ cho thấy cách bạn có thể lưu trữ và truy cập dữ liệu liên tục chỉ bằng cách sử dụng mã phía máy khách.





LocalStorage trong JavaScript là gì?

Đối tượng localStorage là một phần của API lưu trữ web mà hầu hết các trình duyệt web đều hỗ trợ. Bạn có thể lưu trữ dữ liệu dưới dạng các cặp khóa-giá trị bằng localStorage. Các khóa và giá trị duy nhất phải ở định dạng Chuỗi DOM UTF-16.





Nếu bạn muốn lưu trữ các đối tượng hoặc mảng, bạn sẽ phải chuyển đổi chúng thành chuỗi bằng cách sử dụng JSON.stringify () phương pháp. Bạn có thể lưu trữ tối đa 5MB dữ liệu trong localStorage. Ngoài ra, tất cả các cửa sổ có cùng nguồn gốc có thể chia sẻ dữ liệu localStorage của trang web đó.

Trình duyệt sẽ không xóa dữ liệu này ngay cả khi người dùng đóng nó. Nó sẽ có sẵn cho trang web đã tạo nó trong bất kỳ phiên nào trong tương lai. Tuy nhiên, bạn không nên sử dụng localStorage cho dữ liệu nhạy cảm vì các tập lệnh khác chạy trên cùng một trang có thể truy cập nó.



localStorage so với sessionStorage

Các localStorage và sessionStorage các đối tượng là một phần của Web Storage API lưu trữ cục bộ các cặp khóa-giá trị. Tất cả các trình duyệt hiện đại đều hỗ trợ cả hai. Với localStorage, dữ liệu không hết hạn ngay cả sau khi người dùng đóng trình duyệt của họ. Điều này khác với sessionStorage xóa dữ liệu khi phiên trang kết thúc. Phiên trang kết thúc khi bạn đóng một tab hoặc cửa sổ.