Sự khác nhau giữa Local Storage, Session Storage và Cookie

Khi xây dựng một ứng dụng web, việc lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng là một kỹ thuật không thể thiếu nhằm hạn chế việc liên tục gửi yêu cầu lên máy chủ. Ba cơ chế phổ biến nhất để thực hiện nhiệm vụ này là Local Storage, Session Storage và Cookie. 

Nhìn từ bên ngoài chúng có vẻ hoạt động tương tự nhau, nhưng bản chất kỹ thuật và mục đích sử dụng lại có sự phân hóa rõ rệt. Việc chọn sai cơ chế lưu trữ có thể dẫn đến những lỗ hổng bảo mật nghiêm trọng, đặc biệt là khi xử lý các dữ liệu nhạy cảm như phiên đăng nhập.

Local Storage, Session Storage và Cookie là gì?

Local Storage và Session Storage thuộc Web Storage API

Local Storage và Session Storage đều là thành phần cốt lõi của Web Storage API. Đây là cơ chế cho phép lưu trữ dữ liệu dưới dạng cặp khóa và giá trị ngay trên trình duyệt của người dùng. Cả hai đều chia sẻ chung một cú pháp thao tác bao gồm các lệnh thiết lập dữ liệu, lệnh đọc dữ liệu, lệnh xóa một mục cụ thể và lệnh dọn dẹp toàn bộ bộ nhớ.

Điểm khác biệt duy nhất giữa hai loại bộ nhớ này nằm ở vòng đời của dữ liệu. Local Storage lưu trữ dữ liệu vĩnh viễn cho đến khi bị xóa thủ công bằng mã lập trình hoặc khi người dùng chủ động dọn dẹp lịch sử duyệt web. Ngược lại, Session Storage chỉ lưu giữ thông tin trong thời gian một thẻ tab trình duyệt còn mở và toàn bộ dữ liệu sẽ bốc hơi ngay lập tức khi người dùng đóng thẻ tab đó lại.

Cookie là cơ chế lâu đời phục vụ giao tiếp mạng

Cookie ra đời sớm hơn rất nhiều so với Web Storage API và mang một sứ mệnh hoàn toàn khác. Ngay từ đầu nó đã được thiết kế để phục vụ việc duy trì trạng thái giao tiếp giữa trình duyệt và máy chủ. Cookie cũng lưu dữ liệu dưới định dạng khóa và giá trị, nhưng nó đi kèm với khả năng thiết lập thời gian hết hạn cực kỳ chi tiết. Điểm đặc biệt nhất làm nên giá trị của Cookie chính là việc nó luôn được trình duyệt tự động đính kèm vào mọi yêu cầu mạng gửi đến máy chủ đích.

Bảng so sánh chi tiết các cơ chế lưu trữ Local Storage, Session Storage và Cookie

Phân tích phạm vi và thời gian sống của dữ liệu

Một điểm dễ gây nhầm lẫn cho các lập trình viên mới là cách trình duyệt phân vùng dữ liệu giữa các cửa sổ làm việc. Local Storage phân vùng theo tên miền, nghĩa là nếu người dùng mở mười thẻ tab cùng truy cập vào một trang web, cả mười thẻ này đều nhìn thấy và chia sẻ chung một khối dữ liệu Local Storage.

Trong khi đó Session Storage lại phân vùng khắt khe hơn khi gắn liền với từng thẻ tab riêng biệt. Hai thẻ tab mở cùng một trang web sẽ sở hữu hai vùng Session Storage hoàn toàn độc lập với nhau, mặc dù dữ liệu bên trong vẫn được bảo toàn nguyên vẹn nếu người dùng tải lại trang trên cùng một thẻ tab đó.

Cookie sở hữu cách quản lý thời gian sống linh hoạt nhất. Nếu lập trình viên không đặt thời gian hết hạn, cookie sẽ hoạt động tương tự như Session Storage và tự động biến mất khi phiên làm việc kết thúc. Nếu được cung cấp một mốc thời gian cụ thể thông qua các thuộc tính giới hạn, cookie sẽ tồn tại bền bỉ qua nhiều phiên làm việc khác nhau giống như Local Storage.

Khả năng tự động đính kèm dữ liệu lên máy chủ

Đây là điểm khác biệt mang tính quyết định về mặt kỹ thuật có ảnh hưởng lớn nhất đến việc thiết kế kiến trúc ứng dụng. Cookie luôn được trình duyệt tự động nhúng vào phần tiêu đề của mọi luồng giao tiếp mạng gửi đến máy chủ, ngay cả khi trang web không hề chủ động ra lệnh gửi dữ liệu đi. Chính vì cơ chế tự động này, Cookie luôn là lựa chọn hàng đầu để lưu trữ các thông tin mà máy chủ cần biết ngay từ yêu cầu kết nối đầu tiên, điển hình nhất là trạng thái đăng nhập của người dùng.

Ngược lại, khối dữ liệu nằm trong Local Storage và Session Storage hoàn toàn bị cô lập tại thiết bị cá nhân và không bao giờ tự động bay lên máy chủ. Nếu muốn máy chủ đọc được những thông tin này, lập trình viên bắt buộc phải tự viết mã trích xuất dữ liệu và nhúng thủ công vào các luồng gọi giao diện lập trình ứng dụng. Do đó đối với các hệ thống cần máy chủ kết xuất sẵn giao diện ban đầu dựa trên trạng thái người dùng, việc lưu thông tin vào Web Storage API sẽ khiến máy chủ rơi vào trạng thái mù thông tin ở lần truy cập đầu tiên.

Nên dùng loại nào để lưu token đăng nhập an toàn?

Đây là bài toán bảo mật hóc búa nhất mà phần lớn các bài so sánh thường phân tích chưa đủ sâu. Vì Local Storage và Session Storage đều mở cửa hoàn toàn cho JavaScript truy cập, bất kỳ đoạn mã độc nào lọt được vào trang web thông qua lỗ hổng tấn công kịch bản chéo trang XSS đều có thể dễ dàng vét sạch toàn bộ dữ liệu trong kho lưu trữ này. Nếu bạn đặt thẻ xác thực đăng nhập vào đây, tài khoản của người dùng sẽ đối mặt với rủi ro bị đánh cắp cực kỳ cao.

Để giải quyết triệt để lỗ hổng này, các tổ chức bảo mật uy tín trên toàn cầu bao gồm cả OWASP đều thống nhất khuyến nghị ưu tiên lưu trữ thẻ xác thực vào Cookie thay vì sử dụng Web Storage API. Bằng cách kích hoạt cờ bảo mật HttpOnly cho Cookie, lập trình viên có thể vô hiệu hóa hoàn toàn khả năng đọc dữ liệu từ JavaScript, biến nỗ lực đánh cắp thông tin qua lỗi XSS trở nên vô vọng. Kết hợp thêm cờ Secure sẽ tạo ra lớp khiên thứ hai, đảm bảo thẻ xác thực chỉ được truyền tải qua các luồng mạng đã được mã hóa.

Đối với kiến trúc ứng dụng một trang Single Page Application, xu hướng thiết kế an toàn nhất hiện nay là lưu thẻ làm mới phiên đăng nhập vào Cookie có cờ bảo mật, trong khi thẻ truy cập ngắn hạn chỉ được lưu tạm thời trong bộ nhớ hoạt động của ứng dụng, tuyệt đối không ghi vào bất kỳ bộ nhớ thiết bị nào.

Khi nào nên dùng Local Storage và Session Storage?

Local Storage là mảnh đất lý tưởng dành cho những dữ liệu không mang tính nhạy cảm và cần duy trì lâu dài để cải thiện trải nghiệm người dùng. Ví dụ kinh điển nhất là việc ghi nhớ cấu hình giao diện nền tối hoặc nền sáng, ngôn ngữ hiển thị ưa thích, hay trạng thái thu gọn thanh công cụ bên hông màn hình.

Đối với Session Storage, nền tảng này tỏa sáng khi ứng dụng cần lưu giữ dữ liệu trung gian trong một phiên thao tác ngắn ngủi. Một tình huống ứng dụng hoàn hảo là khi người dùng điền thông tin vào một biểu mẫu đăng ký trải dài qua nhiều bước. Session Storage giúp giữ lại dữ liệu nhập dở dang phòng trường hợp người dùng vô tình tải lại trang, nhưng đồng thời đảm bảo mọi thông tin rác này sẽ tự động bị dọn dẹp sạch sẽ ngay khi họ đóng cửa sổ trình duyệt.

Ví dụ minh họa cách sử dụng qua mã lập trình

Cú pháp tương tác với các kho lưu trữ Web Storage API hoàn toàn giống hệt nhau, lập trình viên chỉ cần thay đổi tên đối tượng gọi hàm.

javascript

// Local Storage: dữ liệu tồn tại đến khi bị xóa thủ công

localStorage.setItem('theme', 'dark');

const theme = localStorage.getItem('theme');

localStorage.removeItem('theme');

// Session Storage: dữ liệu mất khi đóng tab

sessionStorage.setItem('formStep', '2');

const formStep = sessionStorage.getItem('formStep');

Với Cookie, mặc dù JavaScript hỗ trợ đọc và ghi thông qua thuộc tính tài liệu, nhưng trong thực tế phát triển phần mềm an toàn, các Cookie quan trọng mang cờ bảo mật luôn được máy chủ chủ động khởi tạo và gán xuống trình duyệt thay vì để thao tác này diễn ra ở phía thiết bị người dùng.

javascript

// Đọc toàn bộ cookie hiện có, dạng một chuỗi

console.log(document.cookie);

// Tạo một cookie mới, hết hạn sau 7 ngày

document.cookie = 'language=vi; max-age=604800; path=/';

Câu hỏi thường gặp (FAQs)

1. Local Storage và Session Storage có bị mã độc JavaScript đọc được không? Có. Mọi khối dữ liệu nằm trong hai không gian lưu trữ này đều hiển hiện rõ ràng trước bất kỳ đoạn mã JavaScript nào đang chạy trên trang, bao gồm cả những mã độc được tiêm vào qua lỗ hổng hệ thống. Đây là lý do cốt lõi để không bao giờ lưu trữ thẻ xác thực đăng nhập tại đây.

2. Cookie có giới hạn dung lượng lưu trữ là bao nhiêu? Mỗi cookie thường bị giới hạn dung lượng ở mức rất khiêm tốn khoảng 4KB và bản thân trình duyệt cũng khống chế số lượng cookie tối đa cho mỗi tên miền. Do đó cơ chế này chỉ phù hợp để vận chuyển các chuỗi định danh ngắn gọn thay vì lưu trữ khối lượng văn bản lớn.

3. Đóng trình duyệt thì dữ liệu Local Storage có bị mất không? Không. Khối dữ liệu này vẫn nằm an toàn trên ổ cứng thiết bị ngay cả khi bạn khởi động lại máy tính. Nó chỉ biến mất khi bạn tự viết mã lệnh xóa hoặc khi người dùng chủ động vào phần cài đặt trình duyệt để dọn dẹp dữ liệu duyệt web.

4. Cờ bảo mật HttpOnly và Secure trong Cookie có tác dụng gì? Cờ HttpOnly đóng vai trò bịt mắt JavaScript, ngăn chặn tin tặc trích xuất thẻ xác thực bằng các đoạn mã nhúng trái phép. Trong khi đó cờ Secure đóng vai trò khóa chặt đường truyền, ra lệnh cho trình duyệt chỉ được phép gửi Cookie này đi khi kết nối mạng đã được mã hóa an toàn. Việc kết hợp hai cờ này là tiêu chuẩn bắt buộc cho mọi nền tảng web hiện đại.

Kết luận

Local Storage, Session Storage và Cookie tuy chia sẻ chung mục tiêu lưu trữ dữ liệu tại thiết bị cá nhân nhưng lại mang trong mình những đặc tính kỹ thuật hoàn toàn chuyên biệt. Đối với các cấu hình trải nghiệm người dùng không mang tính bảo mật, hai chuẩn Web Storage API mang lại sự tiện lợi và tốc độ truy xuất tuyệt vời. Tuy nhiên khi đối mặt với dữ liệu nhạy cảm định danh người dùng, sự thấu hiểu về rủi ro bảo mật và ưu tiên sử dụng Cookie đi kèm các cờ mã hóa an toàn chính là thước đo phân biệt một kỹ sư lập trình chuyên nghiệp.