Các kiểu không gian lưu trữ có sẵn cho các dữ liệu có thể trên máy chủ hoặc máy khách, cho phép chúng ta lựa chọn theo nhu cầu. LocalStorage, sessionStorage và cookie có điểm chung là đều để lưu một vài thông tin ở trên trình duyệt để sau này có thể sử dụng dễ dàng hơn. Vậy còn điểm khác nhau? Hãy cùng tìm hiểu ngay nhé!

	Cookies	LocalStorage	SessionStorage
Dung lượng	4KB	5-10 MBs (Tùy trình duyệt)	5 MBs
Khả năng truy cập	Tất cả cửa sổ	Tất cả cửa sổ	Riêng tư cho tab
Thời gian hết hạn	Thiết lập thủ công	Không bao giờ hết hạn	Khi đóng tab
Lưu trữ	Trình duyệt và Server	Chỉ trình duyệt	Chỉ trình duyệt

Session Storage:

SessionStorage (Lưu trữ phiên) là cơ chế lưu trữ web được cung cấp bởi các trình duyệt hiện đại và lưu trữ dữ liệu tạm thời ở máy khách. Dữ liệu được lưu trữ trong SessionStorage khả dụng khi tab hoặc cửa sổ trình duyệt được mở, bị xóa khi tab hoặc cửa sổ đó bị đóng.

Để sử dụng tính năng SessionStorage trong JavaScript, đối tượng này có thể sử dụng để cung cấp các phương thức để thiết lập, truy xuất và xóa dữ liệu. Sau đây là ví dụ minh họa cách sử dụng SessionStorage:

Trong đoạn mã trên, phương thức setItem() dùng lưu trữ dữ liệu trong SessionStorage. Để lấy dữ liệu, phương thức getItem() được sử dụng. Để xóa một mục cụ thể, phương thức RemoveItem() được dùng và để xóa tất cả dữ liệu, sử dụng phương thức clear().

Local Storage

LocalStorage là một cơ chế lưu trữ web khác được cung cấp bởi các trình duyệt để lưu trữ dữ liệu ở máy khách. Không giống như SessionStorage, dữ liệu được lưu trong LocalStorage vẫn tồn tại ngay cả sau khi đóng và mở lại trình duyệt. Dữ liệu vẫn có sẵn cho đến khi được người dùng xóa hoặc thông qua mã JavaScript.

Để sử dụng LocalStorage trong JavaScript, đối tượng localStorage được sử dụng  cung cấp các phương thức tương tự như sessionStorage. Sau đây là ví dụ minh họa cách sử dụng localStorage:

Đoạn mã trên tương tự như phần sessionStorage. Phương thức setItem() dùng lưu trữ dữ liệu, phương thức getItem() để truy xuất dữ liệu, phương thức RemoveItem() để xóa một mục cụ thể và phương thức clear() để xóa tất cả dữ liệu.

Cookies:

Cookie là những mẩu dữ liệu nhỏ được một trang web lưu trữ ở phía máy khách. Chúng có thể được sử dụng để lưu dữ liệu giữa các yêu cầu hoặc phiên làm việc khác nhau. Cookie có ngày hết hạn và có thể được đặt ở chế độ liên tục hoặc chỉ theo phiên.

Để làm việc với cookie trong JavaScript, chúng ta cần sử dụng thuộc tính document.cookie để cung cấp chuỗi biểu diễn tất cả các cookie được liên kết với tài liệu hiện tại. Sau đây là ví dụ minh họa cách làm việc với cookie:

Trong đoạn mã trên, để đặt cookie một chuỗi cho thuộc tính document.cookie. Chuỗi có định dạng “key=value”, trong chuỗi còn chứa các thông tin như: ngày hết hạn, đường dẫn và tên miền.

• Để truy xuất cookie, chia chuỗi document.cookie bởi ký tự “; ” để lấy mảng cookie riêng lẻ. Sau đó, tiếp tục phần chia theo ký tự “=” để lấy các cặp khóa giá trị.
• Để xóa cookie, có thể đặt ngày hết hạn của cookie thành ngày trong quá khứ, điều này sẽ vô hiệu hóa cookie một cách hiệu quả.

Khi chọn giữa sessionStorage, localStorage và cookie, hãy xem xét các yếu tố sau:

• SessionStorage phù hợp với dữ liệu chỉ cần có trong phiên của người dùng.
• LocalStorage phù hợp với dữ liệu cần tồn tại qua các phiên.
• Cookie phù hợp với lượng dữ liệu nhỏ và có các tùy chọn bổ sung như ngày hết hạn và giới hạn tên miền.

Chọn cơ chế lưu trữ thích hợp dựa trên yêu cầu cụ thể và nhu cầu lưu trữ dữ liệu của bạn.

Sự khác biệt chính giữa sessionStorage, localStoreage và cookie như sau:

1. Tính bền vững của dữ liệu

• SessionStorage: Dữ liệu được lưu trữ trong sessionStorage có thể truy cập khi tab hoặc cửa sổ trình duyệt được mở. Nó sẽ bị xóa khi tab hoặc cửa sổ bị đóng.
• LocalStorage: Dữ liệu được lưu trữ trong localStorage vẫn tồn tại ngay cả sau khi đóng và mở lại trình duyệt. Nó vẫn tồn tại cho đến khi được người dùng xóa hoặc thông qua mã JavaScript.
• Cookie: Cookie có thể được đặt ngày hết hạn khiến chúng tồn tại lâu dài hoặc chỉ theo phiên. Cookie liên tục vẫn còn trên thiết bị của người dùng cho đến ngày hết hạn, trong khi cookie phiên sẽ bị xóa khi phiên trình duyệt kết thúc.

2. Giới hạn lưu trữ

• SessionStorage: Thông thường, SessionStorage cho phép giới hạn lưu trữ lớn hơn so với cookie. Nó có thể lưu trữ nhiều dữ liệu hơn cho mỗi tên miền.
• LocalStorage: LocalStorage cũng cung cấp giới hạn bộ nhớ lớn hơn so với cookie. Nó có thể lưu trữ nhiều dữ liệu hơn đáng kể trên mỗi tên miền.
• Cookie: Cookie có giới hạn lưu trữ nhỏ hơn so với sessionStorage và LocalStorage. Mỗi cookie có thể lưu trữ một lượng dữ liệu giới hạn (thường là vài kilobyte) trên mỗi tên miền.

3. Xử lý tự động

• SessionStorage: SessionStorage không yêu cầu xử lý thủ công khi hết hạn dữ liệu. Dữ liệu sẽ tự động bị xóa khi tab hoặc cửa sổ trình duyệt bị đóng.
• LocalStorage: LocalStorage không có cơ chế hết hạn tự động. Dữ liệu vẫn còn cho đến khi được người dùng xóa rõ ràng hoặc thông qua mã JavaScript.
• Cookie: Cookie có thể được ấn định ngày hết hạn. Khi đến ngày hết hạn, trình duyệt sẽ tự động xóa cookie.

4. Truy cập dữ liệu

• SessionStorage và localStorage: Dữ liệu được lưu trữ trong SessionStorage và LocalStorage có thể được truy cập trực tiếp bằng API JavaScript, mang lại khả năng truy cập và thao tác dễ dàng.
• Cookie: Có thể truy cập và sửa đổi cookie bằng API JavaScript, nhưng quyền truy cập bị hạn chế hơn so với SessionStorage và LocalStorage.

5. Lưu lượng mạng

• SessionStorage và LocalStorage: Dữ liệu được lưu trữ trong SessionStorage và LocalStorage không được gửi đến máy chủ với mọi yêu cầu HTTP mà nó nằm ở phía máy khách, giảm lưu lượng mạng không cần thiết.
• Cookie: Cookie được tự động gửi đến máy chủ với mọi yêu cầu HTTP cho tên miền tương ứng, làm tăng lưu lượng mạng.

SessionStorage phù hợp để lưu trữ dữ liệu tạm thời trong phiên của người dùng, LocalStorage thích hợp cho dữ liệu liên tục cần có sẵn trong các phiên và cookie rất hữu ích cho lượng dữ liệu nhỏ và có các tùy chọn hết hạn và hạn chế miền. Hy vọng thông qua bài viết này, bạn đã chọn được cơ chế lưu trữ dựa trên yêu cầu dữ liệu cụ thể và hành vi lưu trữ mong muốn.

Bộ môn Công nghệ thông tin
Trường Cao đẳng FPT Mạng cá cược bóng đá cơ sở Đà Nẵng