STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

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

    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.
    03/08/2014
    09/08/2020
    2 phút đọc
    ioFlashStorage - Lưu Trữ Dữ Liệu Tại 1 Lần Yêu Cầu 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

    0 Bình luận
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Đề xuất

    Tìm Hiểu về Window.sessionStorage
    Hướng dẫn sử dụng sessionStorage với JavaScript thông qua code ví dụ.
    Tìm Hiểu về Window.localStorage
    Tìm hiểu về localStorage trong HTML5 và cách sử dụng thông qua ...

    Khám phá

    Sử Dụng CSS Image Sprites Tối Ưu Tải Trang
    Tối ưu quá trình load một trang web với CSS-Sprite. Các icon, hình ảnh ...
    29/05/2014
    SHA-1 - Secure Hash Algorithm 1
    SHA-1 là một trong những thuật toán băm mã hóa, được dùng trong việc ...
    Thuật Toán Nén Dữ Liệu RLE
    Trong quá trình lưu trữ cũng như truyền dữ liệu, việc nén dữ liệu là ...
    Lưu Trữ Thông Tin Game với PlayerPrefs
    Hướng dẫn sử dụng và thao tác với class PlayerPrefs trong Unity để lưu ...
    Firefox OS - Phát Triển Ứng Dụng - Và Thế Giới Của Mozilla
    Firefox OS đã ngừng phân phối vào 8/2015. Bên cạnh đó, bài viết này giới ...
    Cơ Bản về Ảnh - Cách OpenCV Lưu Trữ Dữ Liệu Ảnh
    Khái niệm cơ bản về ảnh và cách lưu trữ dữ liệu ảnh trong OpenCV.
    Cơ Sở Dữ Liệu Là Gì?
    Cơ sở dữ liệu (database) đối với lập trình viên rất quen thuộc, nó là dữ ...
    Cài Đặt Và Cấu Hình Microsoft SQL Server 2014 Express
    Cài đặt và cấu hình Microsoft SQL Server 2014 Express, tạo môi trường ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020