Search…

ioFlashStorage - Lưu Trữ Dữ Liệu Tại 1 Lần Yêu Cầu Trang

09/08/20202 min read
Lưu trữ các trạng thái của web tại trình duyệt với ioFlashStorage (JavaScript), rất hữu ích cho việc lưu trạng thái tại 1 lần nạp trang.

Để 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 ioFlashStorage mới nhất bao gồm demo mẫu tại đây.
  • ioFlashStorage tươ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 sessionStoragelocalStorage 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.

Bài chung series

IO Stream

IO Stream Co., Ltd

30 Trinh Dinh Thao, Hoa Thanh ward, Tan Phu district, Ho Chi Minh city, Vietnam
+84 28 22 00 11 12
developer@iostream.co

383/1 Quang Trung, ward 10, Go Vap district, Ho Chi Minh city
Business license number: 0311563559 issued by the Department of Planning and Investment of Ho Chi Minh City on February 23, 2012

©IO Stream, 2013 - 2024