STDIO
Tìm kiếm gần đây
    Mục lục
    Thảo luận
    0
    Liên kết
    QR Code

    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

    JavaScript

    JavaScript

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

    Đề xuất

    Lưu Trữ Thông Tin Game Với PlayerPrefs

    Lưu Trữ Thông Tin Game Với PlayerPrefs

    Lưu điểm số, thông tin hay trạng thái game là điều quan trọng và là nhu ...

    Lập Trình GameUnity

    12/03/2016

    Tìm Hiểu về Window.sessionStorage

    Tìm Hiểu về Window.sessionStorage

    Hướng dẫn sử dụng sessionStorage với JavaScript thông qua code ví dụ.

    JavaScriptJavaScript Nâng Cao

    29/07/2020

    Khám phá thêm

    Tìm Hiểu về Window.localStorage

    Tìm Hiểu về Window.localStorage

    Tìm hiểu về localStorage trong HTML5 và cách sử dụng thông qua ...

    JavaScriptJavaScript Nâng Cao

    15/09/2014

    Sử Dụng CSS Image Sprites Tối Ưu Tải Trang

    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 ...

    La Kiến Vinh

    29/05/2014

    SHA-1 - Secure Hash Algorithm 1

    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 ...

    Cyber SecurityCơ bản

    04/05/2019

    Thuật Toán Nén Dữ Liệu RLE

    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à ...

    Giải Thuật Lập TrìnhKiến thức

    05/12/2016

    Firefox OS - Phát Triển Ứng Dụng - Và Thế Giới Của Mozilla

    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 ...

    JavaScriptJavaScript Nâng Cao

    18/09/2014

    Cơ Bản về Ảnh - Cách OpenCV Lưu Trữ Dữ Liệu Ảnh

    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.

    Computer VisionOpenCV

    24/05/2016

    Cơ Sở Dữ Liệu Là Gì?

    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ữ ...

    Nguyễn Tấn Khôi

    24/05/2018

    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

    Cài đặt và cấu hình Microsoft SQL Server 2014 Express, tạo môi trường ...

    Trần Thị Hồng Thảo

    01/12/2017

    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