Giao thức HTTP đóng vai trò quan trọng trong việc truyền tải dữ liệu giữa máy chủ (server) và trình duyệt (client). Tuy nhiên, một nhược điểm lớn của HTTP là nó không có trạng thái (stateless), tức là nó không tự động ghi nhớ dữ liệu giữa các lần gửi và nhận yêu cầu. Điều này có nghĩa là mỗi lần tải trang mới, dữ liệu trước đó sẽ không được giữ lại.

Để giải quyết vấn đề này, các công nghệ như Local Storage, Session Storage và Cookies được sử dụng để lưu trữ và theo dõi dữ liệu trên trình duyệt. Trong bài viết này, chúng ta sẽ tìm hiểu sự khác nhau giữa ba phương thức lưu trữ này và tại sao một lập trình viên web cần hiểu rõ về chúng.

1. Local Storage là gì?

Local Storage giúp các trang web lưu trữ dữ liệu dưới dạng cặp key-value ngay trên trình duyệt của người dùng. Dữ liệu này vẫn được giữ lại ngay cả khi người dùng đóng hoặc mở lại trình duyệt, khác với Session Storage, vốn chỉ tồn tại trong suốt phiên làm việc và bị xóa khi đóng tab hoặc cửa sổ trình duyệt.

Tuy nhiên, trong chế độ duyệt web riêng tư (Incognito Mode), cách hoạt động của Local Storage có thể khác nhau tùy vào trình duyệt. Trong hầu hết các trường hợp, dữ liệu sẽ tự động bị xóa khi kết thúc phiên duyệt web.

Một số điểm quan trọng về Local Storage:

• Dung lượng lưu trữ: Thường từ 5MB - 10MB, tùy vào trình duyệt.

• Tính bền vững: Dữ liệu vẫn còn ngay cả khi đóng/mở trình duyệt.

• Phạm vi hoạt động: Dữ liệu được lưu theo từng miền (domain) và phân biệt giữa HTTP và HTTPS.

• Hỗ trợ trình duyệt: Hầu hết các trình duyệt hiện đại đều hỗ trợ Local Storage.

Các phương thức làm việc với Local Storage

Local Storage cung cấp bốn phương thức chính để thao tác với dữ liệu:

1.1. Phương thức setItem()

• Dùng để lưu dữ liệu vào Local Storage.

• Nhận vào hai tham số: key (tên khóa) và value (giá trị cần lưu).

Cú pháp:

localStorage.setItem(key, value);

1.2. Phương thức getItem()

• Dùng để lấy dữ liệu từ Local Storage dựa trên key đã lưu trước đó.

• Nhận vào một tham số là key.

Cú pháp:

localStorage.getItem(key);

1.3. Phương thức removeItem()

Dùng để xóa một giá trị trong Local Storage theo key tương ứng.

Cú pháp:

localStorage.removeItem(key);

1.4. Phương thức clear()

Dùng để xóa toàn bộ dữ liệu đã lưu trong Local Storage.

Cú pháp:

localStorage.clear();

2. Session Storage là gì?

Session Storage là một dạng lưu trữ tạm thời trong trình duyệt, có thể truy cập thông qua thuộc tính sessionStorage. Điểm khác biệt chính giữa sessionStorage và localStorage là:

• localStorage lưu dữ liệu vĩnh viễn cho đến khi bị xóa thủ công.

• sessionStorage chỉ lưu dữ liệu trong suốt phiên làm việc (session) và sẽ bị xóa ngay khi tab hoặc cửa sổ trình duyệt đóng lại.

Cách hoạt động của Session Storage

Session Storage giúp lưu trữ dữ liệu tạm thời, có thể sử dụng khi người dùng vẫn đang mở tab hoặc cửa sổ trình duyệt. Dữ liệu trong sessionStorage vẫn tồn tại ngay cả khi người dùng tải lại trang (refresh), nhưng sẽ bị xóa khi tab hoặc trình duyệt đóng lại.

So với localStorage, sessionStorage phù hợp để lưu những thông tin ngắn hạn, như:

• Cài đặt tạm thời của người dùng trên trang web.

• Dữ liệu form nhập trước khi gửi.

• Thông tin xác thực trong một phiên làm việc (session-based authentication).

Cách sessionStorage hoạt động với giao thức

• Dữ liệu trong sessionStorage bị ràng buộc bởi giao thức.

• Nếu một trang được tải qua HTTP (http://abc.com), nó sẽ có một sessionStorage riêng, tách biệt với khi trang được tải qua HTTPS (https://abc.com).

• Dữ liệu lưu trong sessionStorage được mã hóa theo định dạng UTF-16 DOMString (2 byte cho mỗi ký tự).

Các điểm quan trọng về Session Storage

• Dung lượng lưu trữ: Thông thường khoảng 5MB.

• Thời gian lưu trữ: Dữ liệu tồn tại chỉ khi tab/cửa sổ trình duyệt còn mở.

• Phạm vi hoạt động: Chỉ áp dụng trong một tab hoặc cửa sổ. Nếu mở một tab hoặc cửa sổ mới, sessionStorage mới sẽ được tạo.

• Hỗ trợ trình duyệt: Được hỗ trợ trên hầu hết các trình duyệt phổ biến.

Các phương thức của Session Storage

Session Storage cung cấp bốn phương thức chính để thao tác với dữ liệu. 

2.1. Phương thức setItem()

Phương thức này nhận hai tham số: key (tên khóa) và value (giá trị). Nó được sử dụng để lưu trữ một giá trị với một khóa cụ thể trong sessionStorage.

Cú pháp:

sessionStorage.setItem(key, value);

2.2. Phương thức getItem()

Phương thức này nhận một tham số là key và được dùng để lấy giá trị đã lưu trữ tương ứng với khóa đó.

Cú pháp:

var user = sessionStorage.getItem("key");

2.3. Phương thức removeItem()

Phương thức này dùng để xóa một giá trị trong sessionStorage, dựa vào key của nó.

Cú pháp:

sessionStorage.removeItem(key);

2.4. Phương thức clear()

Phương thức này dùng để xóa toàn bộ dữ liệu được lưu trong sessionStorage.

Cú pháp:

sessionStorage.clear();

3. Cookies

Cookies là những đoạn dữ liệu nhỏ được lưu trữ trong trình duyệt của người dùng, chủ yếu được sử dụng để quản lý phiên làm việc (session management), xác thực (authentication), và theo dõi hoạt động người dùng. Khi bạn truy cập một trang web, một số thông tin sẽ được lưu lại trên máy của bạn để giúp trang web nhận diện bạn và hiển thị nội dung phù hợp với sở thích của bạn.

Trong lịch sử phát triển của internet, cookies đã đóng một vai trò quan trọng. Khi một người dùng truy cập vào một trang web, trình duyệt sẽ gửi yêu cầu (request) đến server để tải trang. Mỗi lần truy cập đều được xem là một yêu cầu mới và server không tự động nhớ thông tin từ những lần truy cập trước.

Nếu bạn truy cập một trang web 100 lần, server vẫn coi đó là 100 yêu cầu riêng biệt. Vì server phải xử lý hàng nghìn yêu cầu mỗi giây, việc lưu trữ thông tin của tất cả người dùng trên server là không khả thi. Thay vào đó, cookies được gửi đến trình duyệt của bạn và lưu trữ trên thiết bị của bạn để giúp trang web nhận diện bạn trong những lần truy cập sau.

Khi bạn quay lại trang web, trình duyệt sẽ gửi cookie đó lên server, giúp server nhận diện bạn và phản hồi nhanh hơn. Gần như mọi server đều sử dụng cookies (mặc dù hiện nay một số trang web hạn chế do các quy định về quyền riêng tư và quảng cáo).

Những điều cần biết về Cookies

• Dung lượng lưu trữ: Thường bị giới hạn ở 4KB.

• Thời gian tồn tại: Có thể được đặt thời gian hết hạn tùy theo cấu hình (cookie phiên - session cookie hoặc cookie vĩnh viễn - persistent cookie).

• Phạm vi: Cookies chỉ có hiệu lực trên tên miền đã thiết lập, nhưng có thể được chia sẻ giữa server và trình duyệt.

• Truyền dữ liệu: Cookies được gửi kèm mọi yêu cầu HTTP, điều này có thể ảnh hưởng đến hiệu suất tải trang.

So sánh Local Storage, Session Storage và Cookies

Kết luận

• Nếu bạn cần lưu dữ liệu lâu dài trên trình duyệt mà không cần gửi đến server → Dùng Local Storage.

• Nếu bạn chỉ muốn lưu dữ liệu trong thời gian một tab/cửa sổ đang mở → Dùng Session Storage.

• Nếu bạn cần chia sẻ dữ liệu giữa client và server → Dùng Cookies.

VietnamWorks inTECH hy vọng bài viết này giúp bạn hiểu rõ về sự khác biệt giữa Local Storage, Session Storage và Cookies, cũng như khi nào nên sử dụng chúng trong phát triển web!

VietnamWorks inTECH