[JS Basics] LocalStorage, SessionStorage và Cookies: Khi nào dùng cái nào?

Bạn đã bao giờ tự hỏi làm thế nào một trang web có thể "nhớ" giỏ hàng của bạn ngay cả khi bạn đã tắt máy, hay làm sao bạn vẫn đăng nhập trên Facebook sau nhiều ngày không truy cập? Phép màu đằng sau những trải nghiệm tiện lợi này chính là khả năng lưu trữ dữ liệu của trình duyệt, và ba "gã khổng lồ" thống trị vùng đất này chính là Cookie, LocalStorage, và SessionStorage.

Chúng không phải là đối thủ của nhau, mà là những công cụ với những sứ mệnh riêng biệt. Hiểu rõ bản chất, điểm mạnh, điểm yếu của từng loại sẽ giúp lập trình viên xây dựng những ứng dụng web thông minh hơn và người dùng có cái nhìn sâu sắc hơn về thế giới mạng. Hãy cùng khám phá tất cả trong bài viết dưới đây nhé!

1. Cookie: Người tiền bối "lắm lời" 🍪

Cookie là công nghệ lâu đời nhất, ra đời từ những ngày đầu của Internet. Hãy hình dung Cookie như một chiếc "tem phiếu" hay một "tấm vé ra vào" nhỏ mà máy chủ gửi cho trình duyệt của bạn.

Mỗi khi trình duyệt của bạn gửi một yêu cầu đến máy chủ đó (ví dụ: tải một trang mới, gửi một biểu mẫu), nó sẽ đính kèm chiếc "tem phiếu" này theo. Dựa vào thông tin trên tem, máy chủ có thể nhận ra bạn là ai và bạn đã làm gì trước đó.

Đặc điểm chính:

• Dung lượng cực nhỏ: Chỉ khoảng 4KB. Chỉ đủ để chứa những thông tin nhận dạng cơ bản.
• Tự động gửi đi: Đây là đặc điểm "lắm lời" của Cookie. Dù muốn hay không, toàn bộ dữ liệu Cookie sẽ được tự động đính kèm vào mọi yêu cầu HTTP gửi đến cùng một domain. Điều này có thể làm tăng dung lượng yêu cầu một cách không cần thiết, ảnh hưởng đến hiệu suất.
• Có ngày hết hạn: Cookie có thể được thiết lập thời gian sống. Nếu không, nó sẽ bị xóa khi bạn đóng trình duyệt.
• Giao tiếp hai chiều: Cookie có thể được tạo ra bởi cả máy chủ (server-side) và trình duyệt (client-side).

Khi nào nên dùng Cookie?

• Xác thực người dùng: Lưu trữ token xác thực (authentication tokens) để duy trì trạng thái đăng nhập là trường hợp sử dụng phổ biến và hiệu quả nhất.
• Theo dõi hành vi: Các công cụ phân tích như Google Analytics dùng Cookie để theo dõi hành vi người dùng trên trang.
• Cá nhân hóa cơ bản: Lưu những tùy chọn đơn giản như ngôn ngữ bạn đã chọn.

// Ví dụ tạo một Cookie tồn tại trong 7 ngày
document.cookie =
  'username=Gemini; expires=Fri, 28 Sep 2025 12:00:00 UTC; path=/'

2. LocalStorage và SessionStorage: Cặp đôi hiện đại 💾

Để khắc phục những nhược điểm của Cookie (dung lượng nhỏ, tự động gửi đi), HTML5 đã giới thiệu Web Storage API, bao gồm LocalStorage và SessionStorage. Chúng giống như những "kho chứa đồ" cá nhân, rộng rãi và chỉ nằm yên trong trình duyệt của bạn.

LocalStorage: Chiếc két sắt bền bỉ

Hãy coi LocalStorage như một cuốn sổ ghi chép không bao giờ mất hoặc một chiếc két sắt cá nhân trên trình duyệt. Dữ liệu bạn lưu vào đây sẽ tồn tại mãi mãi, qua mọi lần bạn đóng mở trình duyệt, khởi động lại máy tính, cho đến khi bạn hoặc ứng dụng web chủ động xóa nó đi.

Đặc điểm chính:

• Dung lượng lớn: Khoảng 5-10MB tùy trình duyệt, lớn hơn rất nhiều so với Cookie.
• Chỉ ở phía Client: Dữ liệu này không bao giờ tự động gửi lên máy chủ. Nó chỉ được truy cập bằng JavaScript phía người dùng. Điều này giúp giảm tải cho máy chủ và tăng tốc độ tải trang.
• Không bao giờ tự hết hạn: Dữ liệu tồn tại vĩnh viễn cho đến khi bị xóa.
• Phạm vi theo nguồn gốc (origin): Dữ liệu được chia sẻ giữa tất cả các tab và cửa sổ có cùng một nguồn gốc (cùng giao thức, domain, và port).

Khi nào nên dùng LocalStorage?

• Lưu cài đặt giao diện: Ví dụ như chế độ sáng/tối (light/dark mode).
• Lưu dữ liệu người dùng không nhạy cảm: Giỏ hàng chưa thanh toán, nội dung đang soạn thảo dở dang để tránh mất mát khi tải lại trang.
• Lưu trữ dữ liệu ứng dụng (Application State): Giúp ứng dụng web hoạt động nhanh hơn khi tải lại.

// Lưu dữ liệu
localStorage.setItem('theme', 'dark')

// Đọc dữ liệu
let currentTheme = localStorage.getItem('theme') // 'dark'

// Xóa dữ liệu
localStorage.removeItem('theme')

SessionStorage: Tờ giấy nháp thông minh

Nếu LocalStorage là két sắt, thì SessionStorage chính là một tờ giấy nháp. Nó hoạt động y hệt LocalStorage, nhưng có một khác biệt cốt lõi: dữ liệu chỉ tồn tại trong một phiên (session) làm việc.

Một "phiên" ở đây được tính là một tab trình duyệt. Khi bạn đóng tab đó lại, toàn bộ dữ liệu trong SessionStorage của tab đó sẽ bị xóa sạch.

Đặc điểm chính:

• Dung lượng lớn: Tương tự LocalStorage (khoảng 5-10MB).
• Chỉ ở phía Client: Giống hệt LocalStorage.
• Tự động xóa khi đóng tab: Đây là điểm khác biệt quan trọng nhất.
• Phạm vi theo tab: Dữ liệu trong SessionStorage của một tab sẽ không thể được truy cập từ một tab khác, ngay cả khi chúng có cùng một nguồn gốc.

Khi nào nên dùng SessionStorage?

• Lưu dữ liệu form nhiều bước: Khi điền một form đăng ký phức tạp, bạn có thể lưu dữ liệu của các bước trước vào SessionStorage. Nếu người dùng vô tình tải lại trang, dữ liệu không bị mất, nhưng khi họ đóng tab, thông tin nhạy cảm đó cũng biến mất.
• Lưu trạng thái tạm thời của trang: Ví dụ như bộ lọc sản phẩm người dùng đã chọn trên một trang thương mại điện tử.

// Lưu dữ liệu cho phiên làm việc hiện tại
sessionStorage.setItem('formData', '{"name": "John Doe"}')

// Đọc dữ liệu
let savedForm = sessionStorage.getItem('formData')

3. Bảng so sánh: Tổng quan lại kiến thức 📚

Để dễ hình dung, hãy xem bảng so sánh trực quan dưới đây:

4. Các vấn đề về Bảo mật ⚠️

Một điểm cực kỳ quan trọng: Cả ba cơ chế lưu trữ này đều không an toàn tuyệt đối và có thể bị tấn công kịch bản chéo trang (Cross-Site Scripting - XSS). Một đoạn mã JavaScript độc hại chạy trên trang web có thể đọc và đánh cắp toàn bộ dữ liệu trong LocalStorage, SessionStorage và Cookie (trừ Cookie có cờ HttpOnly).

Quy tắc vàng: TUYỆT ĐỐI KHÔNG lưu trữ bất kỳ thông tin nhạy cảm nào như mật khẩu, số thẻ tín dụng, token API quan trọng ở bất kỳ đâu trong ba cơ chế này.

Kết luận: Chọn đúng "vũ khí" cho đúng "trận đánh"

Cuối cùng, không có người chiến thắng tuyệt đối. "Vua" thực sự là người lập trình viên biết lựa chọn công cụ phù hợp cho từng nhiệm vụ cụ thể:

• Cần một "mẩu giấy" nhỏ gọn để giao tiếp với máy chủ và xác thực người dùng? Hãy dùng Cookie.
• Cần một "kho chứa" bền bỉ để lưu trữ cài đặt và dữ liệu ứng dụng qua nhiều lần truy cập? LocalStorage là lựa chọn hoàn hảo.
• Cần một "bộ nhớ tạm" cho dữ liệu của một quy trình duy nhất trong một tab? SessionStorage sẽ không làm bạn thất vọng.

Hiểu rõ bộ ba này không chỉ giúp bạn xây dựng những trang web tốt hơn mà còn cho bạn sức mạnh để kiểm soát dữ liệu của chính mình khi lướt web. Chúc bạn có những trải nghiệm tuyệt vời trên hành trình khám phá thế giới lập trình web!