Lưu trữ dữ liệu ở Client: Chọn Cookies, Local Storage hay Session Storage?

Khi làm việc với Frontend, chắc hẳn bạn đã không ít lần cần lưu lại một vài thông tin của người dùng: giao diện sáng/tối (Theme), ngôn ngữ đang chọn, hay giỏ hàng tạm thời. Trình duyệt cung cấp cho chúng ta 3 công cụ đắc lực: Cookies, Local Storage, và Session Storage.

Tuy nhiên, chọn sai công cụ không chỉ làm giảm hiệu năng mà còn có thể gây ra những lỗ hổng bảo mật nghiêm trọng (như vụ lưu Token mà chúng ta đã bàn ở bài trước). Hãy cùng phân tích chi tiết từng "nhà kho" này.

1. Cookies: Lão làng của Web

Cookies là cơ chế lưu trữ lâu đời nhất, ra đời cùng với những phiên bản đầu tiên của web. Điểm đặc biệt nhất của Cookies là nó sinh ra để giao tiếp với Server.

• Cơ chế hoạt động: Mỗi khi trình duyệt gửi một HTTP Request lên Server, nó sẽ tự động đính kèm TẤT CẢ các Cookies có chung Domain vào trong Header của request đó.

• Dung lượng: Rất nhỏ, chỉ khoảng 4KB cho mỗi Cookie.

• Vòng đời: Do bạn tự set thông qua thuộc tính Expires hoặc Max-Age. Nếu không set, nó sẽ biến mất khi đóng trình duyệt (gọi là Session Cookie).

• Bảo mật: Có thể được cấu hình cờ HttpOnly (chặn JavaScript đọc) và Secure (chỉ gửi qua HTTPS), khiến nó trở thành nơi an toàn nhất để lưu trữ Access Token hay Session ID.

Khi nào nên dùng?

• Lưu trữ các dữ liệu cần thiết cho việc xác thực người dùng (Authentication) mà Server cần biết ngay lập tức khi nhận Request.

• Lưu vết hành vi người dùng (Tracking/Analytics).

2. Local Storage: Chiếc ổ cứng vô hạn của trình duyệt

Ra đời cùng HTML5, Local Storage thuộc nhóm Web Storage API. Nó giải quyết điểm yếu của Cookies: Không tự động gửi lên Server, giúp tiết kiệm băng thông một cách đáng kể.

• Cơ chế hoạt động: Dữ liệu nằm hoàn toàn ở máy Client (trình duyệt). Server không hề biết đến sự tồn tại của nó trừ khi bạn cố tình dùng JavaScript để đọc và gửi đi thông qua API.

• Dung lượng: Rất hào phóng, thường từ 5MB đến 10MB tùy trình duyệt.

• Vòng đời: Vĩnh viễn. Dữ liệu trong localStorage sẽ nằm ở đó mãi mãi, ngay cả khi bạn tắt máy tính hay khởi động lại trình duyệt, cho đến khi bị xóa bằng code (localStorage.removeItem()) hoặc người dùng tự clear data trình duyệt.

• Bảo mật: Hoàn toàn mở với JavaScript. Dễ dàng bị tấn công XSS (Cross-Site Scripting) nếu bạn lưu thông tin nhạy cảm.

Khi nào nên dùng?

• Lưu trữ cài đặt cá nhân: theme = 'dark', language = 'vi'.

• Caching dữ liệu: Lưu lại các danh mục tĩnh, kết quả API ít thay đổi để load trang nhanh hơn ở lần sau.

3. Session Storage: Người bạn "tạm thời"

Session Storage là người anh em sinh đôi với Local Storage. Nó có chung API, chung dung lượng, chung đặc điểm không gửi lên Server. Điểm khác biệt duy nhất nằm ở Vòng đời (Lifespan).

• Cơ chế hoạt động: Cách thức hoạt động giống hệt Local Storage. Tuy nhiên, dữ liệu của Session Storage được cách ly hoàn toàn theo từng Tab trình duyệt. Hai tab mở cùng một URL cũng sẽ có 2 vùng sessionStorage khác nhau.

• Vòng đời: Tạm thời. Dữ liệu sẽ lập tức bị xóa sạch ngay khi bạn đóng Tab hoặc đóng Cửa sổ trình duyệt.

Khi nào nên dùng?

• Lưu trạng thái của một form đăng ký nhiều bước (Multi-step form). Nếu user lỡ F5, dữ liệu vẫn còn. Nhưng nếu họ đóng tab, dữ liệu rác sẽ tự động dọn dẹp.

• Lưu lại vị trí cuộn trang (scroll position) hoặc các filter tìm kiếm tạm thời của riêng tab đó.

4. Bảng Tóm Tắt So Sánh

Để dễ hình dung, hãy nhìn vào bảng so sánh tổng quan dưới đây:

5. Tổng kết

Không có công cụ nào là hoàn hảo, chỉ có công cụ phù hợp với đúng hoàn cảnh. Quy tắc ngón tay cái là:

• Nếu dữ liệu nhạy cảm và Server cần đọc nó: Hãy dùng Cookies (kết hợp HttpOnly).

• Nếu dữ liệu không nhạy cảm, cần lưu lâu dài: Chọn Local Storage.

• Nếu dữ liệu tạm thời, chỉ có giá trị trong một phiên làm việc ngắn: Dùng Session Storage.