- Tham gia
- 28/02/2015
- Bài viết
- 17,128
- Được Like
- 12,743
Tìm hiểu cách sử dụng Web Storage trong HTML5 để lưu trữ dữ liệu trang web
Trang web có thể lưu trữ dữ liệu tại máy khách (trình duyệt máy khách) với HTML5 web storage. 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
Có hai loại Web Storage HTML5 mà bạn có thể sử dụng:
Làm việc với Web Storage
Cú pháp để truy cập sessionStorage và localStorage 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ị
Lấy giá trị
Xóa một giá trị đã lưu
Xóa tất cả
Chúc các bạn thành công.
Trang web có thể lưu trữ dữ liệu tại máy khách (trình duyệt máy khách) với HTML5 web storage. 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
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 sessionStorage và localStorage 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ị
Mã:
localStorage.setItem("key1", "value1");
Lấy giá trị
Mã:
//Lấy và In ra giá trị - nếu key1 không tồn tại nó trả về ****
alert(localStorage.getItem("key1"));
Xóa một giá trị đã lưu
Mã:
localStorage.removeItem("key1");
Xóa tất cả
Mã:
localStorage.clear();
Chúc các bạn thành công.
Nguồn: Internet
Bài viết liên quan
Bài viết mới