Cookie, Local Storage và Session Storage Trong Trình Duyệt

4. Giống nhau:

• Cả ba phương thức đều lưu trữ dữ liệu dưới dạng key-value.
• Dữ liệu được lưu trữ trên trình duyệt web của người dùng.
• Dễ dàng sử dụng và truy cập bằng JavaScript.

5. Giới hạn bảo mật:

• Cookie có thể bị đánh cắp bởi các trang web khác nếu không được bảo mật đúng cách.
• Local Storage và Session Storage có thể bị truy cập bởi các trang web độc hại nếu mã JavaScript bị khai thác.
• Cần sử dụng các biện pháp bảo mật thích hợp để bảo vệ dữ liệu được lưu trữ.

6. Lựa chọn phương thức phù hợp:

• Cookie: Lưu trữ nhỏ, có thời gian sống có thể cấu hình thời gian tồn tại của cookie, sử dụng cho xác thực và theo dõi hành vi của con người, duy trì trạng thái đăng nhập các website.
• Local Storage: Lưu trữ lâu dài, dung lượng lớn, thời gian tồn tại mãi mãi trừ khi chỉ bị xóa bằng JavaScript, hoặc xóa bộ nhớ trình duyệt, hoặc xóa bằng localStorage API. sử dụng cho cài đặt và lịch sử.
• Session Storage: Lưu trữ trong phiên làm việc, dữ liệu tồn tại trong phiên làm việc, sử dụng cho lưu trữ tạm thời.

B. Đi sâu vào Cookie, Local Storage và Session Storage

localStorage là gì ?

Tất cả các trình duyệt hiện đại đều hỗ trợ chức năng này. LocalStorage giúp website lưu trữ dữ liệu vĩnh viễn trên trình duyệt. Trừ khi người dùng xóa cache hoặc làm các hành động như cài lại trình duyệt.

Về cơ bản, nó như một table trong Excel, nhưng chỉ có hai trường là: key và value. Một số ví dụ dùng localStorage như một số user preferences: ngôn ngữ, theme, danh mục sản phẩm được chọn, giao diện tuỳ chỉnh, dashboard, layout, …

Có rất nhiều giá trị trong một ứng dụng website nên lưu trong LocalStorage thay vì SessionStorage.

Tuy nhiên, bạn nên lưu ý là LocalStorage không bảo mật. Bạn có thể dễ dàng lưu dữ liệu, lấy dữ liệu và chỉnh sửa dữ liệu từ LocalStorage.

Ngoài ra, điểm yếu của LocalStorage là nó chỉ lưu đơn thuần một String. Các kiểu dữ liệu phức tạp đều không phù hợp để lưu trong LocalStorage.

sessionStorge là gì ?

sessionStorage khá giống với localStorage. Vì chúng đều thuộc về web storage API.

• Lưu data theo cặp key/value ở local browser và phía server không access được các data này.
• Có cùng APIs: setItem, getItem, removeItem, clear.
• Cho phép lưu trữ nhiều data(khoảng 10MB).

Một khuyết điểm của cả localStorage và sessionStorage là có thể bị đọc bởi Javascript. Do đó dễ bị đánh cắp thông tin thông qua một cross-site scriting. Vì vậy, chúng ta không nên lưu trữ những thông tin nhạy cảm như token ID, password, username, email của người dùng vào localStorage hay sessionStorage.


Khi close tab hay close browser thì data ở localStorage vẫn tồn tại, và chỉ bị mất khi user xoá cache hoặc clear web data. Còn đối với sessionStorage thì data sẽ bị mất ngay khi close tab hoặc close browser.