Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Web Storage trong HTML5

Sử dụng Web Storage để lưu trữ dữ liệu trang web ngay tại máy khách, lưu trữ tại trình duyệt

Web Storage

Với HTML5 web storage, trang web có thể lưu trữ dữ liệu tại máy khách (trình duyệt máy khách). Trước HTML5, chúng ta phải sử dụng hàm JavaScript về cookies để làm điều này.

Một số lợi ích của Web Storage

  • An toàn hơn cookie
  • Nhanh hơn
  • Lưu dữ liệu lớn hơn
  • Dữ liệu này không gửi lên server mỗi lần trình duyệt có truy vấn mới

Phân loại Web Storage

Có hai loại Web Storage HTML5 mà bạn có thể sử dụng:

  • sessionStorage() : Các dữ liệu hủy khi đóng trình duyệt
  • localStorage() : Dữ liệu lưu trữ lâu dài kể cả khi đóng trình duyệt

Để sử dụng các API này bạn phải sử dụng đến JavaScript

Làm việc với Web Storage

Cú pháp để truy cập sessionStoragelocalStorage tương tự nhau. Dữ liệu bao giờ cũng được lưu trữ theo cặp key/value. Sau đây là mã JavaScript thực hiện với localStorage với sessionStorage thì tương tự chỉ cần thay tên:

Lưu giá trị

localStorage.setItem("key1", "value1");

Lấy giá trị

//Lấy và In ra giá trị - nếu key1 không tồn tại nó trả về null
alert(localStorage.getItem("key1")); 

Xóa một giá trị đã lưu

localStorage.removeItem("key1");

Xóa tất cả

localStorage.clear();

Vui lòng đăng ký ủng hộ kênh