Lưu trữ web là một cơ chế cho phép các ứng dụng web lưu trữ dữ liệu ở phía máy khách, do đó cho phép chúng giữ lại dữ liệu ngay cả sau khi người dùng đóng trình duyệt hoặc điều hướng khỏi trang web. Có ba loại lưu trữ web có sẵn trong các trình duyệt web hiện đại: Cookies, localStorage và sessionStorage. Trong bài viết này, chúng ta sẽ khám phá chi tiết từng cơ chế lưu trữ này.

Bánh quy

Cookie là các tệp văn bản nhỏ được trình duyệt web lưu trữ ở phía máy khách. Chúng thường được sử dụng để lưu trữ tùy chọn người dùng, thông tin đăng nhập và dữ liệu khác cần được duy trì giữa các phiên trình duyệt. Cookie có thể được đặt bằng cách sử dụng document.cookiethuộc tính trong JavaScript và chúng có ngày hết hạn xác định thời gian chúng sẽ tồn tại ở phía máy khách.

Cookie có một số ưu điểm và nhược điểm. Một mặt, chúng được hỗ trợ rộng rãi bởi các trình duyệt web và có thể được sử dụng để lưu trữ một lượng nhỏ dữ liệu. Mặt khác, chúng dễ bị tấn công bảo mật, chẳng hạn như cross-site scripting (XSS) và cross-site request forgery (CSRF) và chúng có dung lượng lưu trữ hạn chế là 4KB.

lưu trữ cục bộ

localStorage là một cơ chế lưu trữ cho phép các ứng dụng web lưu trữ dữ liệu ở phía máy khách mà không có ngày hết hạn. Không giống như cookie, localStorage không được gửi đến máy chủ với mọi yêu cầu HTTP, điều này làm cho nó trở thành một cách hiệu quả và an toàn hơn để lưu trữ dữ liệu ở phía máy khách. localStorage có dung lượng lưu trữ từ 5–10 MB, tùy thuộc vào trình duyệt web.

Để sử dụng localStorage trong JavaScript, bạn có thể sử dụng localStorageđối tượng cung cấp giao diện lưu trữ khóa-giá trị đơn giản. Dưới đây là ví dụ về cách đặt và truy xuất giá trị từ localStorage:

localStorage.setItem('myKey', 'myValue');
const myValue = localStorage.getItem('myKey');

phiênStorage

sessionStorage tương tự như localStorage, nhưng nó chỉ lưu trữ dữ liệu trong suốt thời gian của phiên trình duyệt. Khi người dùng đóng trình duyệt hoặc điều hướng khỏi trang web, dữ liệu được lưu trữ trong sessionStorage sẽ bị xóa. sessionStorage có cùng dung lượng lưu trữ như localStorage (5–10 MB) và nó cũng được truy cập thông qua sessionStorageđối tượng trong JavaScript.

Đây là một ví dụ về cách sử dụng sessionStorage:

sessionStorage.setItem('myKey', 'myValue');
const myValue = sessionStorage.getItem('myKey');

Phần kết luận

Trong bài viết này, chúng ta đã khám phá ba loại lưu trữ web có sẵn trong các trình duyệt web hiện đại: Cookies, localStorage và sessionStorage. Cookie được hỗ trợ rộng rãi nhưng có lỗ hổng bảo mật và dung lượng lưu trữ hạn chế. localStorage là một cách hiệu quả và an toàn hơn để lưu trữ dữ liệu ở phía máy khách và thật tuyệt vời để lưu trữ dữ liệu cần duy trì trong các phiên trình duyệt. sessionStorage rất hữu ích để lưu trữ dữ liệu cần có trong một phiên trình duyệt. Bằng cách hiểu sự khác biệt giữa các cơ chế lưu trữ này, các nhà phát triển web có thể chọn cơ chế lưu trữ phù hợp cho các ứng dụng web của họ và cải thiện trải nghiệm người dùng.

Bạn có thể tìm và liên hệ với tôi trên LinkedIn , GitHub và Facebook và đây là danh mục đầu tư của tôi để biết thêm chi tiết về tôi.