Local Storage, Session Storage, và Cookies đều là các phương thức lưu trữ dữ liệu trên trình duyệt của người dùng, nhưng chúng có sự khác nhau về tính năng, mục đích sử dụng, và cách thức hoạt động.
1. Local Storage
- Tính năng: Lưu trữ dữ liệu trên trình duyệt lâu dài (persistent storage), ngay cả khi người dùng đóng hoặc tải lại trang.
- Dung lượng: Lớn hơn cookie, thường là khoảng 5-10 MB (tùy trình duyệt).
- Phạm vi truy cập: Dữ liệu chỉ có thể được truy cập từ các trang cùng domain, protocol và port.
- Thời gian sống: Dữ liệu sẽ tồn tại vĩnh viễn cho đến khi người dùng xóa nó thủ công hoặc được lập trình để xóa.
- Bảo mật: Dữ liệu không tự động được gửi kèm trong các yêu cầu HTTP (như với cookie), nhưng vẫn có thể bị truy cập bởi JavaScript nếu trang bị lỗ hổng như XSS.
- Ứng dụng: Lưu trữ dữ liệu mà không cần gửi lên server, ví dụ như cấu hình giao diện, các cài đặt người dùng, token.
Ví dụ:
javascript
// Lưu trữ dữ liệu
localStorage.setItem('username', 'john_doe');const username = localStorage.getItem(‘username’);
localStorage.removeItem(‘username’);
localStorage.clear();
2. Session Storage
- Tính năng: Tương tự như Local Storage nhưng dữ liệu chỉ tồn tại trong một phiên (session) duy nhất, tức là khi tab hoặc cửa sổ trình duyệt bị đóng, dữ liệu sẽ bị xóa.
- Dung lượng: Tương tự Local Storage, thường khoảng 5-10 MB.
- Phạm vi truy cập: Chỉ có thể được truy cập trong tab hoặc cửa sổ hiện tại. Các tab khác mở cùng một trang web không thể chia sẻ Session Storage.
- Thời gian sống: Dữ liệu bị xóa ngay khi phiên kết thúc (tức là khi đóng tab hoặc trình duyệt).
- Bảo mật: Tương tự như Local Storage, dữ liệu không được gửi lên server và không bị rò rỉ nếu không có lỗi bảo mật XSS.
- Ứng dụng: Lưu trữ dữ liệu phiên tạm thời, như các form tạm thời hoặc dữ liệu chỉ cần trong thời gian ngắn.
Ví dụ:
javascript
// Lưu trữ dữ liệu
sessionStorage.setItem('sessionID', '12345');const sessionID = sessionStorage.getItem(‘sessionID’);
sessionStorage.removeItem(‘sessionID’);
sessionStorage.clear();
3. Cookies
- Tính năng: Lưu trữ dữ liệu dưới dạng các cặp key-value và có thể được gửi lên server trong mỗi yêu cầu HTTP, giúp duy trì trạng thái phiên giữa các yêu cầu (ví dụ: đăng nhập, giỏ hàng).
- Dung lượng: Rất nhỏ, giới hạn khoảng 4 KB mỗi cookie.
- Phạm vi truy cập: Cookies có thể được chia sẻ giữa các trang cùng domain và được kiểm soát bởi
SameSite,Path,Domainđể hạn chế phạm vi chia sẻ. - Thời gian sống: Có thể tùy chỉnh thời gian sống, cookie có thể là phiên (xóa khi đóng trình duyệt) hoặc tồn tại trong một khoảng thời gian cụ thể.
- Bảo mật: Có thể thiết lập các thuộc tính như
HttpOnly(ngăn JavaScript truy cập),Secure(chỉ gửi qua kết nối HTTPS), vàSameSite(ngăn chặn CSRF). - Ứng dụng: Thường dùng để duy trì trạng thái phiên giữa các yêu cầu HTTP, ví dụ lưu trữ JWT token để xác thực, lưu trạng thái đăng nhập, lưu thông tin cài đặt ngôn ngữ.
Ví dụ:
javascript
// Tạo cookie
document.cookie = "username=john_doe; path=/; max-age=3600; SameSite=Lax";const cookies = document.cookie; // “username=john_doe”
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;
4. So sánh Local Storage, Session Storage và Cookies
| Thuộc tính | Local Storage | Session Storage | Cookies |
|---|---|---|---|
| Dung lượng | ~5-10 MB | ~5-10 MB | ~4 KB |
| Thời gian sống | Vĩnh viễn cho đến khi bị xóa | Khi đóng tab hoặc trình duyệt | Có thể thiết lập thời gian sống |
| Phạm vi truy cập | Truy cập trên cùng domain | Chỉ trong tab hoặc cửa sổ hiện tại | Truy cập qua các yêu cầu HTTP hoặc JavaScript |
| Bảo mật | Dễ bị tấn công XSS | Dễ bị tấn công XSS | Hỗ trợ HttpOnly, Secure, SameSite |
| Gửi trong HTTP | Không | Không | Có, gửi trong mỗi yêu cầu HTTP |
| Sử dụng phổ biến | Lưu trữ dữ liệu lâu dài trên trình duyệt | Lưu trữ dữ liệu phiên tạm thời | Lưu trạng thái đăng nhập, token xác thực |
5. Khi nào nên dùng gì?
- Local Storage: Dùng khi cần lưu trữ dữ liệu lâu dài trên trình duyệt mà không cần gửi kèm theo mỗi request HTTP. Ví dụ: cài đặt giao diện, dữ liệu người dùng tạm thời.
- Session Storage: Dùng khi cần lưu trữ dữ liệu tạm thời chỉ trong một phiên (session), như lưu thông tin form hoặc trạng thái trang hiện tại.
- Cookies: Dùng khi cần gửi dữ liệu lên server trên mỗi yêu cầu HTTP, chẳng hạn như thông tin xác thực (JWT, session ID) hoặc các thông tin người dùng cần gửi cho server.
6. Kết luận
- Local Storage và Session Storage phù hợp cho việc lưu trữ dữ liệu trên client-side mà không cần giao tiếp với server.
- Cookies là lựa chọn tốt khi cần gửi dữ liệu đi cùng mỗi yêu cầu HTTP, đặc biệt là khi xử lý các yêu cầu xác thực hoặc trạng thái người dùng.
Dương Trần Hà, hiện mình đang là kỹ công nghệ phần mềm và cũng là giám đốc thành lập công ty DTH Solutions. Mình có nhiều năm kinh nghiệm, kiến thức chuyên môn lập trình, nodejs, nestjs, laravel, yii2, reactjs, nextjs. Mình đã phát triển rất nhiều dự án thực tế cho doanh nghiệp, cơ quan. Mình đã đạt được một số thành công nhỏ, đồng thời mình vẫn đang tiếp tục học tập để trau dồi kiến thức mỗi ngày. Mình rất yêu thích công nghệ, đam mê chia sẻ những kiến thức, thông tin hữu ích cho mọi người.