Trong ứng dụng web, thông tin được lưu trữ trên máy chủ và được truy cập thông qua trình duyệt của người dùng. Tuy nhiên, đôi khi cần lưu trữ thông tin một cách tạm thời hoặc địa phương trên trình duyệt. Để làm được điều này, chúng ta có thể sử dụng hai công cụ quan trọng trong JavaScript là Local Storage và Session Storage.
Local Storage và Session Storage là hai đối tượng được hỗ trợ bởi trình duyệt và giúp lưu trữ dữ liệu trên máy tính của người dùng. Các dữ liệu được lưu trữ bằng cách sử dụng cặp key-value, tương tự như một đối tượng JSON. Các dữ liệu lưu trữ có thể được truy cập và sử dụng bởi các trang web khác nhau trên cùng một trình duyệt.
Local Storage
Với Local Storage là một phương thức lưu trữ dữ liệu trên trình duyệt, cho phép lưu trữ dữ liệu vĩnh viễn trên trình duyệt người dùng. Các dữ liệu được lưu trữ bằng cách sử dụng cặp key-value và có thể được truy cập và sử dụng bởi các trang web khác nhau trên cùng một trình duyệt.
Cách sử dụng Local Storage
Để lưu trữ dữ liệu vào Local Storage, chúng ta có thể sử dụng phương thức setItem() của đối tượng localStorage như sau:
localStorage.setItem("key", "value");
Trong đó, "key" là tên của khóa (key) được lưu trữ, và "value" là giá trị của khóa đó.
Chúng ta có thể truy cập dữ liệu được lưu trữ trong Local Storage bằng cách sử dụng phương thức getItem() như sau:
let value = localStorage.getItem("key");
console.log(value);
Chúng ta có thể xóa dữ liệu lưu trữ trong Local Storage bằng cách sử dụng phương thức removeItem() như sau:
localStorage.removeItem("key");
Chúng ta cũng có thể xóa tất cả dữ liệu lưu trữ trong Local Storage bằng cách sử dụng phương thức clear() như sau:
localStorage.clear();
Session Storage
Session Storage là một phương thức lưu trữ dữ liệu trên trình duyệt web, cho phép lưu trữ dữ liệu tạm thời trong phiên làm việc (session) của người dùng trên trình duyệt. Dữ liệu lưu trữ trong Session Storage được giới hạn trong một phiên làm việc trên trình duyệt, nghĩa là khi phiên làm việc kết thúc, dữ liệu sẽ bị xóa và không thể truy cập được.
Cách sử dụng Session Storage
Để lưu trữ dữ liệu vào session Storage, chúng ta có thể sử dụng phương thức setItem() của đối tượng localStorage như sau:
sessionStorage.setItem('username', 'john');
Chúng ta có thể lấy ra giá trị của thuộc tính đó bằng cách sử dụng phương thức getItem(). Phương thức này nhận vào tham số là tên của thuộc tính cần lấy giá trị.
let username = sessionStorage.getItem('username');
console.log(username); // "john"
Nếu muốn xóa một thuộc tính khỏi Local Storage hoặc Session Storage, chúng ta sử dụng phương thức removeItem(). Phương thức này nhận vào tham số là tên của thuộc tính cần xóa.
localStorage.removeItem('username');
Tương tự, để xóa toàn bộ các thuộc tính đã được lưu trữ trong Session Storage, chúng ta sử dụng phương thức sau:
sessionStorage.clear();
Tổng kết và bài viết có liên quan
Bài viết có liên quan: Các phương thức xử lý đối tượng Math trong JavaScript dễ hiểu dễ tiếp cận với người bắt đầu ( important ). Làm việc với DOM trong JavaScript cực kỳ dễ hiểu dễ tiếp cận với người mới bắt ( important ) Callback và Promise trong JavaScript dễ hiểu, dễ tiếp cận cho người mới bắt đầu ( important )
