突破本地離線儲存的JS庫 localforage

shenjieping發表於2019-03-01
JS

localforage 簡介

專案地址 github.com/localForage…

API中文地址 localforage.docschina.org/

說到本地儲存我們首先想到的就是localStorage儲存, 也有很多人用過, 但是localStorage有以下缺點:

  1. 儲存容量限制, 大部分瀏覽器應該最多就是 5M.
  2. 僅支援字串, 如果儲存的是物件, 需要使用JSON.stringify和JSON.parse方法進行轉化
  3. 讀取都是同步的, 大多數情況下還是挺好使的, 但如果儲存的資料比較大, 列如要儲存一張大圖片的base64格式, 再讀可能會感知延遲

loaclforage 的作用就是用來規避上面localStorage的缺點, 同時保留localStorage的優點而設計的.

localforage 的優點是API非常簡單, 使用方便, 於是, 兩者的用法幾乎一樣

localforage 的邏輯是: 優先使用IndexDB儲存資料, 如果瀏覽器不支援使用 WebSQL, 如果還是不支援, 使用localStorage

localforage 提供回撥 API 同時也支援 ES6 Promises API，你可以自行選擇。

安裝

可以使用 npm install localforage 或者是 bower install localforage

getItem(key, successCallback)

從倉庫中獲取 key 對應的值並將結果提供給回撥函式。如果 key 不存在，getItem() 將返回 null。

當儲存 undefined 時， getItem() 也會返回 null。由於 localStorage 限制，同時出於相容性的原因 localForage 無法儲存 undefined。

localforage.getItem(`somekey`).then(function(value) {
    // 當離線倉庫中的值被載入時，此處程式碼執行
    console.log(value);
}).catch(function(err) {
    // 當出錯時，此處程式碼執行
    console.log(err);
});

// 回撥版本：
localforage.getItem(`somekey`, function(err, value) {
    // 當離線倉庫中的值被載入時，此處程式碼執行
    console.log(value);
});複製程式碼

setItem(key, value, successCallback)

將資料儲存到離線倉庫。你可以儲存如下型別的 JavaScript 物件

  • Array
  • ArrayBuffer
  • Blob
  • Float32Array
  • Float64Array
  • Int8Array
  • Int16Array
  • Int32Array
  • Number
  • Object
  • Uint8Array
  • Uint8ClampedArray
  • Uint16Array
  • Uint32Array
  • String

當使用 localStorage 和 WebSQL 作為後端時，二進位制資料在儲存（和檢索）之前會被序列化。在儲存二進位制資料時，序列化會導致大小增大。

localforage.setItem(`somekey`, `some value`).then(function (value) {
    // 當值被儲存後，可執行其他操作
    console.log(value);
}).catch(function(err) {
    // 當出錯時，此處程式碼執行
    console.log(err);
});

// 不同於 localStorage，你可以儲存非字串型別
localforage.setItem(`my array`, [1, 2, `three`]).then(function(value) {
    // 如下輸出 `1`
    console.log(value[0]);
}).catch(function(err) {
    // 當出錯時，此處程式碼執行
    console.log(err);
});

// 你甚至可以儲存 AJAX 響應返回的二進位制資料
req = new XMLHttpRequest();
req.open(`GET`, `/photo.jpg`, true);
req.responseType = `arraybuffer`;

req.addEventListener(`readystatechange`, function() {
    if (req.readyState === 4) { // readyState 完成
        localforage.setItem(`photo`, req.response).then(function(image) {
            // 如下為一個合法的 <img> 標籤的 blob URI
            var blob = new Blob([image]);
            var imageURI = window.URL.createObjectURL(blob);
        }).catch(function(err) {
          // 當出錯時，此處程式碼執行
          console.log(err);
        });
    }
});複製程式碼


removeItem(key, successCallback)

從離線倉庫中刪除 key 對應的值。

localforage.removeItem(`somekey`).then(function() {
    // 當值被移除後，此處程式碼執行
    console.log(`Key is cleared!`);
}).catch(function(err) {
    // 當出錯時，此處程式碼執行
    console.log(err);
});複製程式碼

clear(successCallback)

從資料庫中刪除所有的 key，重置資料庫。

localforage.clear() 將會刪除離線倉庫中的所有值。謹慎使用此方法。

localforage.clear().then(function() {
    // 當資料庫被全部刪除後，此處程式碼執行
    console.log(`Database is now empty.`);
}).catch(function(err) {
    // 當出錯時，此處程式碼執行
    console.log(err);
});複製程式碼

length(successCallback)

獲取離線倉庫中的 key 的數量（即資料倉儲的“長度”）。

localforage.length().then(function(numberOfKeys) {
    // 輸出資料庫的大小
    console.log(numberOfKeys);
}).catch(function(err) {
    // 當出錯時，此處程式碼執行
    console.log(err);
});複製程式碼

key(keyIndex, successCallback)

根據 key 的索引獲取其名

localforage.key(2).then(function(keyName) {
    // key 名
    console.log(keyName);
}).catch(function(err) {
    // 當出錯時，此處程式碼執行
    console.log(err);
});複製程式碼

keys(successCallback)

獲取資料倉儲中所有的 key

localforage.keys().then(function(keys) {
    // 包含所有 key 名的陣列
    console.log(keys);
}).catch(function(err) {
    // 當出錯時，此處程式碼執行
    console.log(err);
});複製程式碼

setDriver(driverName)
setDriver([driverName, nextDriverName])

若可用，強制設定特定的驅動

預設情況下，localForage 按照以下順序選擇資料倉儲的後端驅動:

  1. IndexedDB
  2. WebSQL
  3. localStorage

如果你想強制使用特定的驅動，可以使用 setDriver()，引數為以下的某一個或多個:

  • localforage.INDEXEDDB
  • localforage.WEBSQL
  • localforage.LOCALSTORAGE

如果你嘗試載入的後端驅動在瀏覽器上不可用，localForage 將使用以前使用的後端驅動中的一個。這意味著如果你試圖強制 Gecko 瀏覽器使用 WebSQL，則會失敗並繼續使用 IndexedDB。

// 強制設定 localStorage 為後端的驅動
localforage.setDriver(localforage.LOCALSTORAGE);

// 列出可選的驅動，以優先順序排序
localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);複製程式碼

config(options)

設定 localForage 選項。在呼叫 localForage

前

必先呼叫它，但可以在 localForage 被載入後呼叫。使用此方法設定的任何配置值都將保留，即使在驅動更改後，所以你也可以先呼叫 config() 再次呼叫 setDriver()。以下配置值可以設定：

driver

　　資料庫的名稱。可能會在在資料庫的提示中會出現。一般使用你的應用程式的名字。在 localStorage 中，它作為儲存在 localStorage 中的所有 key 的字首。

　　

預設值：`localforage`

name

　　資料庫的名稱。可能會在在資料庫的提示中會出現。一般使用你的應用程式的名字。在 localStorage 中，它作為儲存在 localStorage 中的所有 key 的字首。

　　預設值：`localforage`

size

　　資料庫的大小（以位元組為單位）。現在只用於WebSQL

　　預設值: 4980736

storeName

　　資料倉儲的名稱。在 IndexedDB 中為 dataStore，在 WebSQL 中為資料庫 key/value 鍵值表的名稱。僅含字母和數字和下劃線。任何非字母和數字字元都將轉換為下劃線。

　　預設值：`keyvaluepairs`

version

　　資料庫的版本。將來可用於升級; 目前未使用。

　　預設值: 1.0

description

　　資料庫的描述，一般是提供給開發者的。

　　預設值: “

// 將資料庫從 “localforage” 重新命名為 “Hipster PDA App”
localforage.config({
    name: `Hipster PDA App`
});

// 將強制使用 localStorage 作為儲存驅動，即使其他驅動可用。
// 可用配置代替 `setDriver()`。
localforage.config({
    driver: localforage.LOCALSTORAGE,
    name: `I-heart-localStorage`
});

// 配置不同的驅動優先順序
localforage.config({
    driver: [localforage.WEBSQL,
             localforage.INDEXEDDB,
             localforage.LOCALSTORAGE],
    name: `WebSQL-Rox`
});複製程式碼

參考地址 www.zhangxinxu.com/wordpress/2…

相關文章