La Kiến VinhĐể lưu trữ dữ liệu tại trình duyệt web có 2 cách là sử dụng sessionStorage hoặc localStorage. Mỗi loại có cách dùng giống nhau nhưng mục đích sử dụng khác nhau:
sessionStorage: hỗ trợ lưu dữ liệu tại trình duyệt web trong 1 tab, khi mở 1 tab mới dữ liệu sẽ là 1 dữ liệu khác.localStorage: hỗ trợ lưu trữ dữ liệu có tầm hoạt động toàn bộ trình duyệt trên 1 domain.
Giả sử cần lưu trữ dữ liệu trên cùng 1 tab nhưng ở 1 lần load trang thì phải tự hiện thực hoặc sử dụng thư viện được hỗ trợ sẵn là ioFlashStorage.
ioFlashStorage là 1 thư viện nhỏ gọn được STDIO Training phát triển có cách sử dụng gần giống với sessionStorage và localStorage về mặt cú pháp chỉ khác biệt ở tầm vực nhỏ hơn phù hợp với việc lưu tạm trạng thái của web tại 1 lần load trang.
Download phiên bản mới nhất
- Tải
ioFlashStoragemới nhất bao gồm demo mẫu tại đây. ioFlashStoragetương thích với các trình duyệt web hiện tại.
Hướng dẫn sử dụng
Cài đặt
Thêm dòng code sau vào giữa phần <head>
<script type="text/javascript" src="ioFlashStorage-v101.js"></script>
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ioFlashStorage-v101.js"></script>
</head>
<body>
<script>
ioFlashStorage.setItem("text", "www.stdio.vn");
ioFlashStorage.setItem("number", 123456);
ioFlashStorage.setItem("boolean", true);
ioFlashStorage.setItem("array", [1, "contact", false, [5, 6, 7]]);
console.log(ioFlashStorage.getItem("array"));
console.log(ioFlashStorage.getItem("text"));
ioFlashStorage.removeItem("text");
console.log(ioFlashStorage.getItem("text"));
console.log(ioFlashStorage.count());
ioFlashStorage.clear();
console.log(ioFlashStorage.count());
</script>
</body>
</html>Các hàm cơ bản
Lưu trữ dữ liệu
ioFlashStorage.setItem(key, value)
Lấy dữ liệu đã lưu trữ
ioFlashStorage.getItem(key)
Xóa một dữ liệu đã lưu trữ
ioFlashStorage.removeItem(key)
Đếm số lượng dữ liệu đã lưu trữ
ioFlashStorage.count()
Xóa toàn bộ dữ liệu đã lưu trữ
ioFlashStorage.clear()Về cơ bản ioFlashStorage có cách sử dụng gần tương đồng với sessionStorage và localStorage nên có thể tìm hiểu dựa trên 2 đối tượng đó hoặc tải code mẫu về tham khảo thêm cách sử dụng linh hoạt hoặc có thể cải tiến thêm.
