29. LocalStorage và sessionStorage trong lập trình Javascript

localStorage và sessionStorage là hai đối tượng trong lập trình JavaScript dùng để lưu trữ dữ liệu trên trình duyệt của người dùng. Chúng cho phép bạn lưu trữ dữ liệu dưới dạng cặp khóa-giá trị và có thể truy xuất lại dữ liệu này sau này khi người dùng truy cập vào cùng một trang web hoặc cửa sổ trình duyệt.

Tuy nhiên, cả hai đối tượng này có một số sự khác biệt quan trọng về cách lưu trữ và thời gian sống của dữ liệu.

1. localStorage:
   • Dữ liệu được lưu trữ trong localStorage sẽ tồn tại vĩnh viễn cho đến khi bạn xóa nó hoặc người dùng xóa dữ liệu trong trình duyệt.
   • Dữ liệu trong localStorage sẽ được giữ nguyên sau khi trình duyệt đã đóng và mở lại.
   • Dữ liệu trong localStorage sẽ được chia sẻ giữa các cửa sổ trình duyệt và tab trên cùng một trình duyệt.

Ví dụ sử dụng localStorage:

javascript

// Lưu dữ liệu vào localStorage
localStorage.setItem('username', 'John');

// Truy xuất dữ liệu từ localStorage
const username = localStorage.getItem('username');
console.log(username); // Kết quả: "John"

// Xóa dữ liệu từ localStorage
localStorage.removeItem('username');

2. sessionStorage:
   • Dữ liệu được lưu trữ trong sessionStorage chỉ tồn tại trong phiên làm việc (session) hiện tại của trình duyệt.
   • Dữ liệu trong sessionStorage sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt hoặc phiên làm việc kết thúc.
   • Dữ liệu trong sessionStorage không được chia sẻ giữa các cửa sổ trình duyệt và tab trên cùng một trình duyệt.

Ví dụ sử dụng sessionStorage:

javascript

// Lưu dữ liệu vào sessionStorage
sessionStorage.setItem('language', 'English');

// Truy xuất dữ liệu từ sessionStorage
const language = sessionStorage.getItem('language');
console.log(language); // Kết quả: "English"

// Xóa dữ liệu từ sessionStorage
sessionStorage.removeItem('language');

Cả hai đối tượng localStorage và sessionStorage đều hỗ trợ các phương thức chung như getItem(), setItem(), và removeItem() để thao tác với dữ liệu. Để kiểm tra xem trình duyệt của người dùng có hỗ trợ localStorage và sessionStorage hay không, bạn nên sử dụng điều kiện như sau:

javascript

if (typeof(Storage) !== "undefined") {
  // Trình duyệt hỗ trợ localStorage và sessionStorage
  // Bạn có thể thực hiện các hoạt động lưu trữ ở đây
} else {
  // Trình duyệt không hỗ trợ localStorage và sessionStorage
  // Hãy xử lý theo cách thích hợp nếu không hỗ trợ lưu trữ dữ liệu
}

Lưu ý rằng dữ liệu lưu trữ trong cả localStorage và sessionStorage được lưu dưới dạng chuỗi. Trước khi lưu trữ một giá trị không phải chuỗi, bạn cần chuyển đổi nó thành chuỗi bằng cách sử dụng JSON.stringify() và khi truy xuất dữ liệu từ lưu trữ, bạn cần chuyển đổi nó thành kiểu dữ liệu gốc bằng JSON.parse().