Phân biệt và cách sử dụng localStorage và sessionStorage

localStorage và sessionStorage là hai bộ nhớ cục bộ mà các ứng dụng web lưu trữ dữ liệu trên trình duyệt. Cả hai bộ nhớ này đều lưu dữ liệu theo định dạng key-value.

Sử dụng localStorage và sessionStorage để lưu dữ liệu thay thế cho giải pháp dùng Cookie sẽ mang lại những ưu điểm riêng, có thể kể đến như:

• Những dữ liệu này chỉ lưu trên trình duyệt nên server không thể đọc được. Điều này sẽ giúp loại bỏ những vấn đề liên quan tới bảo mật mà giải pháp sử dụng Cookie gặp phải.
• Cú pháp thao tác đơn giản.
• Cho phép lưu trữ nhiều dữ liệu hơn (khoảng 10mb)

Hiện nay, hầu hết các trình duyệt đều hỗ trợ LocalStorage và SessionStorage, bạn thoải mái sử dụng mà không gặp bất cứ trở ngại nào về tính tương thích.

Giữa localStorage và sessionStorage, tùy tình huống mà bạn lựa chọn loại bộ nhớ cho hợp lý.

Bài viết này, mình sẽ giúp bạn phân biệt giữa hai giải pháp lưu trữ này, cũng như cách sử dụng chúng.

Phân biệt localStorage và sessionStorage

Về cơ bản thì cả localStorage và sessionStorage giống hệt nhau, cùng chung API để lưu/lấy dữ liệu/xóa.

Điểm khác biệt duy nhất chính là cơ chế duy trì dữ liệu của chúng. Đó là, với sessionStorage, dữ liệu chỉ được duy trì cho đến khi tab hoặc trình duyệt mở ứng dụng web đó bị đóng. Còn localStorage thì lưu trữ viễn viễn cho đến khi có hành động xóa dữ liệu từ ứng dụng web.

Chỉ có vậy thôi. Nên tùy vào mục đích sử dụng mà lựa chọn bộ nhớ phù hợp với ứng dụng web của bạn.

Phần tiếp theo, mình sẽ hướng dẫn cách sử dụng bộ nhớ localStorage (với sessionStorage hoàn toàn tương tự – vì dùng chung API mà)

Tạo và cập nhật dữ liệu trong localStorage

Như mình đã đề cập ở trên, dữ liệu được lưu trong localStorage dưới dạng cặp key-value. Trong đó, value về cơ bản chỉ lưu dưới dạng dữ liệu cơ bản như string, int…

Hình dưới đây minh họa dữ liệu được lưu trong localStorage như thế nào.

Để thêm dữ liệu, chúng ta sử dụng hàm setItem(<key>, <value>). Lưu ý nè, nếu bạn gọi hàm setItem mà có key trùng nhau thì dữ liệu lần gọi cuối sẽ đè lên các lần trước.

let key = 'Item 1';
localStorage.setItem(key, 'Value');

Để lấy dữ liệu ra sử dụng, chúng ta gọi hàm getItem(<key>).

hàm getItem(<key>).
let 

Xóa dữ liệu trong localStorage

Để xóa dữ liệu, có hai trường hợp:

• Xóa theo key:

localStorage.removeItem(key);

• Xóa toàn bộ dữ liệu có trong localStorage:

localStorage.clear();

Lưu dữ liệu phức tạp bằng cách convert sang JSON String

localStorage là bộ nhớ đơn giản nên nó chỉ hỗ trợ lưu các dữ liệu có kiểu nguyên thủy như String, Number… Trong trường hợp bạn muốn lưu cả một object thì sao?

Cách đơn giản là sử dụng JSON, convert object đó sang JSON string trước khi lưu vào localStorage.

Dưới đây là code ví dụ:

let myObj = { name: 'Dương Anh Sơn', website: 'https://vntalking.com' };
localStorage.setItem(“author”, JSON.stringify(myObj));

Còn khi muốn sử dụng, bạn chỉ cần lấy ra và convert ngược lại thành JSON object.

let item = JSON.parse(localStorage.getItem(“author”));
console.log(item.name); // output: Dương Anh Sơn

Trên đây là cách sử dụng localStorage để lưu dữ liệu trong các ứng dụng web. Nó rất hữu ích và được nhiều người sử dụng cho dự án web của mình. Bạn có thể tham khảo một tác dụng của localStorage trong ReactJS qua bài viết này: Cách tạo Custom React Hook để lưu State vào LocalStorage

​Nhận sách ​Java Advanced Features

​Java là ngôn ngữ lập trình phổ biến nhất thế giới, là hình mẫu của tư tưởng OOP. Nếu bạn muốn bắt đầu với Java thì đây là cuốn sách không thể bỏ qua. Với 63 ví dụ thực hành, cùng với cách viết ngắn gọn dễ hiểu sẽ giúp bạn hiểu rõ bản chất của Java.

​Hiện Amazon đang bán với giá 16$, nhưng với VNTALKING thì miễn phí cho bạn. Còn chờ gì nữa?

DOWNLOAD