Lập trình viên thường bối rối giữa hàng tá lựa chọn lưu trữ dưới Client. Chọn sai có thể dẫn đến lỗ hổng bảo mật (XSS Token Theft).
1. Bảng so sánh nhanh
| Loại | Dung lượng | Thời hạn | Gửi lên Server? | Truy cập bằng JS? | Mục đích |
|---|---|---|---|---|---|
| LocalStorage | 5MB-10MB | Vĩnh viễn (đến khi xóa) | Không | Có (Rủi ro XSS) | Config, Theme, Draft |
| SessionStorage | 5MB | Đóng Tab là mất | Không | Có | Form data tạm thời |
| Cookie | 4KB | Tùy chỉnh (Expires) | Có (Mỗi request) | Có (Trừ khi HttpOnly) | Auth Token, Tracking |
| IndexedDB | > 250MB | Vĩnh viễn | Không | Có (Async) | Dữ liệu lớn, Offline |
2. Cookies: Cũ nhưng Quyền lực
Cookie không chỉ là nơi lưu trữ, nó là cơ chế duy nhất để Server "đánh dấu" Client.
Các cờ bảo mật (Security Flags) quan trọng
Khi set cookie từ Server, Luôn dùng các cờ sau cho Token:
- HttpOnly: JS client (
document.cookie) KHÔNG thể đọc được. -> Chống XSS ăn cắp token. - Secure: Chỉ gửi qua HTTPS.
- SameSite:
Strict: Chỉ gửi cookie nếu đang ở đúng trang đó.Lax: Gửi cookie khi navigate từ trang khác sang (VD click link từ Facebook sang). Đây là default tốt nhất.
http:
Set-Cookie: session_id=xyz; HttpOnly; Secure; SameSite=Lax3. LocalStorage & SessionStorage
Dễ dùng (localStorage.setItem), đồng bộ (Synchronous).
- Tuyệt đối KHÔNG lưu Sensitive Data (Password, Access Token) vào đây nếu không có cơ chế mã hóa. Vì XSS script có thể đọc sạch LocalStorage chỉ bằng 1 dòng code.
- Thích hợp lưu: Dark mode preference, trạng thái Sidebar collapsed, dữ liệu giỏ hàng (Cart) tạm thời.
4. IndexedDB: The Heavy Lifter
Cơ sở dữ liệu NoSQL ngay trong trình duyệt.
- Hỗ trợ Transaction, Index.
- Bất đồng bộ (Async).
- Dùng cho các App phức tạp: Google Docs (offline editing), Figma, cache API response lớn.
- Thư viện khuyên dùng:
idbhoặcDexie.js( vì API gốc rất khó dùng).
Kết luận: Lưu Auth Token ở đâu?
Đây là tranh cãi ngàn năm.
-
Lưu ở LocalStorage:
- Dễ làm. Header
Authorization: Bearer <token>dễ setup. - Rủi ro: Dính XSS là mất Token.
- Dễ làm. Header
-
Lưu ở HttpOnly Cookie:
- An toàn trước XSS (JS không đọc được).
- Rủi ro: Dính CSRF (nhưng đã có SameSite cookie cookie chặn).
- Khó setup hơn (Cần proxy nếu API khác domain).
=> Khuyến nghị: Dùng HttpOnly Cookie cho các App quan trọng (Banking, Enterprise). Dùng LocalStorage cho các dự án nhỏ/trung bình nếu tự tin kiểm soát được XSS.