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.
|
|
|
Local storage là gì ? |
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
|
Tiêu
chí |
Local
Storage |
Session
Storage |
Cookies |
|
Dung
lượng |
5MB -
10MB |
5MB |
4KB |
|
Thời
gian lưu trữ |
Vĩnh viễn
(trừ khi xóa thủ công) |
Chỉ tồn
tại khi tab/cửa sổ trình duyệt mở |
Tùy
theo cấu hình (Session hoặc Persistent) |
|
Ai
có thể truy cập? |
Chỉ
trình duyệt |
Chỉ
trình duyệt |
Server
& trình duyệt |
|
Dữ
liệu có được gửi đến server không? |
Không |
Không |
Có |
|
Hỗ
trợ trình duyệt |
Tất cả
trình duyệt hiện đại |
Tất cả
trình duyệt hiện đại |
Tất cả
trình duyệt hiện đại, kể cả phiên bản cũ |
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.