localStorage là một API được sử dụng cùng với sự xuất hiện của phiên bản HTML5, một loại lưu trữ web có cơ chế tương tự như cookie.
bạn đang xem: Bộ nhớ cục bộ là gì?
Tiếp theo, hãy để tôi tìm hiểu sự khác biệt giữa lưu trữ web và cookie.
1) Mục đích của việc lưu dữ liệu trong trình duyệt
Cookie và lưu trữ web là các chức năng lưu trữ dữ liệu phía máy khách (trình duyệt). Vì vậy, tại sao chức năng này được yêu cầu?
Câu trả lời là HTTP là một giao thức không trạng thái, tức là giao thức không trạng thái.
Kết nối HTTP được thực hiện theo quy trình sau:
Máy khách gửi yêu cầu → phản hồi của máy chủ
Mỗi luồng giao tiếp được xử lý bởi một yêu cầu hoàn toàn riêng biệt. Do đó, máy chủ không phân biệt được máy khách thực hiện yêu cầu truy cập đầu tiên hay đã có quyền truy cập trước đó. Dù sao đi nữa, máy chủ luôn coi máy khách này như một “người lạ” ghé thăm lần đầu tiên.
Để giải quyết vấn đề này, cookie được sử dụng.
Cùng với phản hồi từ máy chủ, các thông tin như nội dung đầu vào và số lần truy cập cũng được lưu trữ.
Khi khách hàng đến từ lần thứ hai trở đi, cookie này cũng được gửi kèm theo yêu cầu. Phía máy chủ chỉ ra thông tin trong cookie để phản hồi dựa trên trạng thái của yêu cầu.
Xem thêm: Nhạc Bolero là gì – Tìm hiểu về Nhạc Bolero
2) So sánh lưu trữ web và cookie
Cho đến nay chúng ta đã hiểu mục đích của việc lưu dữ liệu trong trình duyệt. Bây giờ chúng ta hãy quay lại chủ đề lưu trữ web.
Như đã nói ở trên, cả cookie và lưu trữ web đều là hai chức năng lưu trữ dữ liệu trên trình duyệt. Vậy điểm chung và điểm khác biệt giữa cookie và lưu trữ web là gì?
điểm giống nhau:
Thông tin có thể được ghi đè tự do ở phía máy khách Thông tin được lưu trữ trong cặp ‘khóa’ và ‘giá trị’
sự khác biệt:
Web Storage có thể lưu trữ nhiều Data Web Storage hơn và có thể dễ dàng kiểm soát hơn với JavaScriptCookies được gửi tự động mỗi khi máy khách gửi yêu cầu đến phía máy chủ, trong khi Web Storage chỉ gửi thông tin cần thiết vào thời điểm cần thiết.
Sự khác biệt thứ ba: thời điểm gửi dữ liệu, đến các ứng dụng khác nhau để lưu trữ web và cookie tùy thuộc vào trường hợp sử dụng
Ví dụ, với xử lý: “Chỉ hiển thị phương tiện khi người dùng truy cập lần đầu tiên”, trong trường hợp sử dụng cookie để đánh giá xem người dùng có quyền truy cập hay không, thì ngay cả khi gửi và nhận thông tin khác, nó không phải làm gì với số lần Truy cập, thông tin này vẫn được gửi cùng với yêu cầu.
Trong trường hợp này, việc sử dụng bộ nhớ web có ý nghĩa hơn và cũng dễ xử lý hơn.
Mặt khác, lưu trữ web được chia thành hai loại: localStorage và sessionStorage. Sự khác biệt giữa cả hai nằm ở thời gian dữ liệu được lưu trữ.
Thông tin về localStorage, sessionStorage và cookie được tóm tắt trong bảng sau:
Khoảng thời gian dữ liệu để gửi dữ liệu đến máy chủ
lưu trữ cục bộ
mãi mãi
5 megabyte
chỉ khi cần thiết
phiên lưu trữ
Cho đến khi đóng tab
5 megabyte
chỉ khi cần thiết
bánh quy
Cho đến thời hạn quy định
4 KB
Được gửi tự động với mọi đơn đặt hàng
3) Cách sử dụng localStorage:
Tóm Tắt
3.1) Lưu trữ dữ liệu:
Dữ liệu được lưu trữ trong localStorage bằng phương thức setItem () với localStorage:
localStorage.setItem (‘key’, ‘value’);
Để lưu trữ nhiều giá trị trong một khóa trên localStorage bằng cách sử dụng mảng, cần phải chuyển đổi mảng sang định dạng json vì localStorage chỉ lưu trữ dữ liệu dưới dạng chuỗi.
Xem thêm: Deli verables là gì – Nghĩa của từ Deli verable
const đặt =; const setjson = JSON.stringify (obj); localStorage.setItem (‘key’, setjson);
3.2) Thu thập dữ liệu
Để lấy dữ liệu từ localStorage, chúng ta sử dụng phương thức getItem ():
localStorage.getItem (“key”),
Nếu dữ liệu được lưu trữ trong localStorage dưới dạng một mảng, thì dữ liệu được trả về dưới dạng json, vì vậy dữ liệu phải được chuyển đổi thành một đối tượng trước khi xử lý thêm với javascript:
const obj = JSON.parse (localStorage.getItem (‘key’));
3.3) Xóa dữ liệu:
Sử dụng phương pháp sau để xóa dữ liệu cụ thể hoặc tất cả dữ liệu:
// xóa datalocalStorage.removeItem (‘key’) được chỉ định; // xóa tất cả datalocalStorage.clear ();
3.4) Cách kiểm tra dữ liệu được lưu trữ trên bộ nhớ cục bộ trong Chrome:
Trong trình duyệt Chrome, mở công cụ dành cho nhà phát triển, chuyển đến tab ứng dụng và chọn URL bạn muốn kiểm tra trong phần lưu trữ cục bộ để xem dữ liệu được lưu trữ.
Chuyên mục: Câu hỏi thường gặp
