Cookie vs LocalStorage vs SessionStorage: Khác nhau thế nào và khi nào nên dùng?

Khi phát triển web, chúng ta thường cần lưu dữ liệu ở phía trình duyệt (browser), ví dụ như:

• lưu trạng thái đăng nhập

• lưu chế độ dark mode

• lưu dữ liệu form tạm thời

Trong JavaScript, có 3 cách phổ biến để lưu dữ liệu trên browser:

• Cookie

• LocalStorage

• SessionStorage

Vậy chúng khác nhau như thế nào và nên dùng trong trường hợp nào?

So sánh Cookie vs LocalStorage vs SessionStorage

Từ bảng trên có thể thấy:

• Cookie thường dùng cho authentication và session.

• LocalStorage dùng để lưu dữ liệu lâu dài.

• SessionStorage dùng cho dữ liệu tạm thời trong một tab.

Bây giờ chúng ta sẽ đi vào từng loại chi tiết hơn.

Cookie là gì?

Cookie là dữ liệu nhỏ được lưu trên trình duyệt và tự động gửi lên server trong mỗi HTTP request.

Ví dụ khi user đăng nhập:

1. Server tạo một sessionId

2. Server gửi cookie về browser

3. Mỗi request sau đó browser sẽ tự gửi cookie lên server

Ví dụ request:

Cookie: sessionId=abc123

Server đọc cookie để biết:

• user nào đang đăng nhập

• quyền truy cập của user

Ví dụ tạo cookie bằng JavaScript:

document.cookie = "user=an; expires=Fri, 31 Dec 2026 23:59:59 GMT";

Cookie thường dùng cho

• session đăng nhập

• refresh token

• CSRF token

• remember login

Ví dụ các website lớn như:

• Facebook

• Gmail

• các hệ thống web có login

LocalStorage là gì?

LocalStorage là bộ nhớ dạng key-value được lưu trực tiếp trên browser.

Dữ liệu trong LocalStorage không có thời gian hết hạn, và sẽ tồn tại cho đến khi:

• user xóa dữ liệu browser

• code chủ động xóa

Ví dụ lưu dữ liệu:

localStorage.setItem("token", "abc123");

Lấy dữ liệu:

localStorage.getItem("token");

Ví dụ sử dụng LocalStorage

Lưu chế độ Dark Mode

Giả sử user bật dark mode trên website.

Ta có thể lưu lại lựa chọn này:

localStorage.setItem("theme", "dark")

Khi user quay lại website:

const theme = localStorage.getItem("theme")

Website sẽ tự bật lại dark mode.

Lưu ngôn ngữ website

Ví dụ user chọn tiếng Anh:

localStorage.setItem("language", "en")

Khi reload trang, website vẫn giữ ngôn ngữ đã chọn.

Cache dữ liệu frontend

Ví dụ cache danh sách sản phẩm:

localStorage.setItem("products", JSON.stringify(data))

Lần sau có thể lấy lại dữ liệu mà không cần gọi API ngay.

LocalStorage thường dùng cho

• theme (dark mode / light mode)

• language

• user settings

• cache dữ liệu frontend

SessionStorage là gì?

SessionStorage cũng là bộ nhớ key-value giống LocalStorage, nhưng dữ liệu chỉ tồn tại trong một tab browser.

Khi user đóng tab, toàn bộ dữ liệu trong SessionStorage sẽ bị xóa.

Ví dụ lưu dữ liệu:

sessionStorage.setItem("cart", "123");

Ví dụ sử dụng SessionStorage

Lưu dữ liệu form khi user chưa submit

Giả sử user đang nhập form đăng ký:

• tên

• email

• số điện thoại

Nếu user refresh trang, dữ liệu sẽ mất.

Ta có thể lưu tạm dữ liệu form:

sessionStorage.setItem(
  "registerForm",
  JSON.stringify({
    name: "An",
    email: "an@gmail.com"
  })
)

Khi trang reload, ta có thể lấy lại dữ liệu:

const data = JSON.parse(sessionStorage.getItem("registerForm"))

Như vậy user không cần nhập lại form từ đầu.

Lưu bước hiện tại của form nhiều bước

Ví dụ một form thanh toán:

Bước 1: Thông tin cá nhân
Bước 2: Địa chỉ giao hàng
Bước 3: Thanh toán

Ta có thể lưu bước hiện tại:

sessionStorage.setItem("checkoutStep", "2")

Nếu user refresh trang, họ vẫn quay lại bước 2.

SessionStorage thường dùng cho

• form draft (dữ liệu form chưa submit)

• trạng thái tạm của UI

• form nhiều bước

• giỏ hàng tạm

Khi nào nên dùng Cookie, LocalStorage và SessionStorage?

Dùng Cookie khi

• server cần đọc dữ liệu

• authentication

• session login

• CSRF protection

Dùng LocalStorage khi

• cần lưu dữ liệu lâu dài

• dữ liệu chỉ frontend cần

Ví dụ:

• dark mode

• language

• user settings

• cache dữ liệu

Dùng SessionStorage khi

• dữ liệu chỉ tồn tại trong một tab

• dữ liệu tạm thời

Ví dụ:

• form đang nhập

• bước hiện tại của form

• trạng thái UI tạm

Tổng kết

Tóm lại:

• Cookie → dùng cho authentication và session login

• LocalStorage → lưu dữ liệu lâu dài trên frontend

• SessionStorage → lưu dữ liệu tạm trong một tab browser

📢 Dịch vụ hỗ trợ lập trình & phần mềm

🚀 Bạn đang học CNTT hoặc cần phần mềm thực tế?

💻 TAT TEAM Chúng tôi hỗ trợ:

Blog được biên soạn bởi TAT TEAM, Hỗ trợ lập trình và xây dựng phần mềm!