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

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…