改進的離線存盤

// 通過 localStorage 設定值
localStorage.setItem('key', JSON.stringify('value'));
doSomethingElse();

// 通過 localForage 完成同樣功能
localforage.setItem('key', 'value').then(doSomethingElse);

// localForage 同樣支持回呼函式
localforage.setItem('key', 'value', doSomethingElse);

localForage 是一個 JavaScript 庫，通過簡單類似 localStorage API 的異步存盤來改進你的 Web 應用程式的離線體驗，它能存盤多種型別的資料，而不僅僅是字串，

localForage 有一個優雅降級策略，若瀏覽器不支持 IndexedDB 或 WebSQL，則使用 localStorage，在所有主流瀏覽器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile），

localForage 提供回呼 API 同時也支持 ES6 Promises API，你可以自行選擇，

下載 localforage.min.js

安裝

# 通過 npm 安裝：
npm install localforage

# 或通過 bower：
bower install localforage

<script src="localforage.js"></script>
<script>console.log('localforage is: ', localforage);</script>

使用 localForage，請下載最新版本或使用 npm（npm install localforage）或 bower（bower install localforage）進行安裝，

然后，只需包含 JS 檔案即可使用 localForage：<script src="localforage.js"></script>，你不需要運行任何初始化方法或等待 onready 事件，

資料 API

獲取或設定離線倉庫中的資料的 API，

GETITEM

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

// 回呼版本：
localforage.getItem('somekey', function(err, value) {
    // 當離線倉庫中的值被載入時，此處代碼運行
    console.log(value);
});

getItem(key, successCallback)

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

當存盤 undefined 時， getItem() 也會回傳 null，由于 localStorage 限制，同時出于兼容性的原因 localForage 無法存盤 undefined，

SETITEM

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);
        });
    }
});

setItem(key, value, successCallback)

將資料保存到離線倉庫，你可以存盤如下型別的 JavaScript 物件：

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

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

示例

REMOVEITEM

localforage.removeItem('somekey').then(function() {
    // 當值被移除后，此處代碼運行
    console.log('Key is cleared!');
}).catch(function(err) {
    // 當出錯時，此處代碼運行
    console.log(err);
});

removeItem(key, successCallback)

從離線倉庫中洗掉 key 對應的值，

示例

CLEAR

localforage.clear().then(function() {
    // 當資料庫被全部洗掉后，此處代碼運行
    console.log('Database is now empty.');
}).catch(function(err) {
    // 當出錯時，此處代碼運行
    console.log(err);
});

clear(successCallback)

從資料庫中洗掉所有的 key，重置資料庫，

localforage.clear() 將會洗掉離線倉庫中的所有值，謹慎使用此方法，

LENGTH

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

length(successCallback)

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

KEY

localforage.key(2).then(function(keyName) {
    // key 名
    console.log(keyName);
}).catch(function(err) {
    // 當出錯時，此處代碼運行
    console.log(err);
});

key(keyIndex, successCallback)

根據 key 的索引獲取其名

雖然是從 localStorage API 延續而來的，但此方法被認為有點怪異，

KEYS

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

keys(successCallback)

獲取資料倉庫中所有的 key，

ITERATE

// 同樣的代碼，但使用 ES6 Promises
localforage.iterate(function(value, key, iterationNumber) {
    // 此回呼函式將對所有 key/value 鍵值對運行
    console.log([key, value]);
}).then(function() {
    console.log('Iteration has completed');
}).catch(function(err) {
    // 當出錯時，此處代碼運行
    console.log(err);
});

// 提前退出迭代：
localforage.iterate(function(value, key, iterationNumber) {
    if (iterationNumber < 3) {
        console.log([key, value]);
    } else {
        return [key, value];
    }
}).then(function(result) {
    console.log('Iteration has completed, last iterated pair:');
    console.log(result);
}).catch(function(err) {
    // 當出錯時，此處代碼運行
    console.log(err);
});

iterate(iteratorCallback, successCallback)

迭代資料倉庫中的所有 value/key 鍵值對，

iteratorCallback 在每一個鍵值對上都會呼叫一次，其引數如下： 1. value 為值 2. key 為鍵名 3. iterationNumber 為迭代索引 - 數字

通過在 iteratorCallback 回呼函式中回傳一個非 undefined 的值，能提前退出 iterate，iteratorCallback 的回傳值即作為整個迭代的結果，將被傳入 successCallback，這意味著如果你使用的是 CoffeeScript，那么你需要手動執行一個不帶內容的 return 陳述句才能繼續迭代所有的 key/value 鍵值對，

設定 API

通過這些方法可選擇驅動或配置資料庫，這些方法通常應該在第一個 資料 API 呼叫之前呼叫（即在你呼叫 getItem() 或 length() 之前）

SETDRIVER

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

// 列出可選的驅動，以優先級排序
localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);

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

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

默認情況下，localForage 按照以下順序選擇資料倉庫的后端驅動：

IndexedDB
WebSQL
localStorage

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

localforage.INDEXEDDB
localforage.WEBSQL
localforage.LOCALSTORAGE

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

CONFIG

// 將資料庫從 “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'
});

config(options)

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

driver要使用的首選驅動，與上面的 [setDriver](<https://localforage.docschina.org/#api-setdriver>) 的值格式相同，默認值：[localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE]name資料庫的名稱，可能會在在資料庫的提示中會出現，一般使用你的應用程式的名字，在 localStorage 中，它作為存盤在 localStorage 中的所有 key 的前綴，默認值：'localforage'size資料庫的大小（以位元組為單位），現在只用于WebSQL，默認值：4980736storeName資料倉庫的名稱，在 IndexedDB 中為 dataStore，在 WebSQL 中為資料庫 key/value 鍵值表的名稱，**僅含字母和數字和下劃線，**任何非字母和數字字符都將轉換為下劃線，默認值：'keyvaluepairs'version資料庫的版本，將來可用于升級; 目前未使用，默認值：1.0description資料庫的描述，一般是提供給開發者的，默認值：''

與大多數 localForage API 不同，該 config 方法是同步的，

驅動 API

從1.1版開始，就可以為 localForage 自定義驅動了，

DEFINEDRIVER

// 此處為驅動的實作
var myCustomDriver = {
    _driver: 'customDriverUniqueName',
    _initStorage: function(options) {
        // 在此處自定義實作...
    },
    clear: function(callback) {
        // 在此處自定義實作...
    },
    getItem: function(key, callback) {
        // 在此處自定義實作...
    },
    key: function(n, callback) {
        // 在此處自定義實作...
    },
    keys: function(callback) {
        // 在此處自定義實作...
    },
    length: function(callback) {
        // 在此處自定義實作...
    },
    removeItem: function(key, callback) {
        // 在此處自定義實作...
    },
    setItem: function(key, value, callback) {
        // 在此處自定義實作...
    }
}

// 為 localForage 添加驅動，
localforage.defineDriver(myCustomDriver);

你需要確保接受一個 callback 引數，并且將同樣的幾個引數傳遞給回呼函式，類似默認驅動那樣，同時你還需要 resolve 或 reject Promise，通過默認驅動可了解如何實作自定義的驅動，

自定義實作可包含一個 _support 屬性，該屬性為布林值（true / false），或者回傳一個 Promise,該 Promise 的結果為布林值，如果省略 _support，則默認值是 true ，你用它來標識當前的瀏覽器支持你自定義的驅動，

你在任何一個 localForage 實體上添加驅動實作后，則該驅動可用于頁面內的所有 localForage 實體，

DRIVER

localforage.driver();
// "asyncStorage"

driver()

回傳正在使用的驅動的名稱，在異步的驅動初始化程序中（詳情參閱 [ready](<https://localforage.docschina.org/#api-ready>)）為 null，若初始化未能找到可用的驅動也為 null，

如果驅動在初始化程序中或之后出錯，localForage 將試著使用下一個驅動，由加載 localForage 時的默認驅動順序或傳遞給 setDriver() 的驅動順序決定，

READY

localforage.ready().then(function() {
    // 當 localforage 將指定驅動初始化完成時，此處代碼運行
    console.log(localforage.driver()); // LocalStorage
}).catch(function (e) {
    console.log(e); // `No available storage method found.`
    // 當沒有可用的驅動時，`ready()` 將會失敗
});

ready() 提供了一種方法來確定異步驅動程式初始化程序是否已完成，localForage 會對所有資料 API 方法的呼叫進行緩沖排序，當我們需要知道 localForage 當前正在使用的是哪一個驅動時，此方法會非常有用，

SUPPORTS

localforage.supports(localforage.INDEXEDDB);
// true

supports(driverName)

回傳一個布林值，表示瀏覽器是否支持 driverName，

默認驅動名稱可參閱 [setDriver](<https://localforage.docschina.org/#api-setdriver>)，

多實體

你可以創建多個 localForage 實體，且能指向不同資料倉庫，所有 config 中的配置選項都可用，

CREATEINSTANCE

var store = localforage.createInstance({
  name: "nameHere"
});

var otherStore = localforage.createInstance({
  name: "otherName"
});

// 設定某個資料倉庫 key 的值不會影響到另一個資料倉庫
store.setItem("key", "value");
otherStore.setItem("key", "value2");

創建并回傳一個 localForage 的新實體，每個實體物件都有獨立的資料庫，而不會影響到其他實體，

DROPINSTANCE

localforage.dropInstance().then(function() {
  console.log('Dropped the store of the current instance').
});

localforage.dropInstance({
  name: "otherName",
  storeName: "otherStore"
}).then(function() {
  console.log('Dropped otherStore').
});

localforage.dropInstance({
  name: "otherName"
}).then(function() {
  console.log('Dropped otherName database').
});

呼叫時，若不傳參，將洗掉當前實體的 “資料倉庫” ，

呼叫時，若引數為一個指定了 name 和 storeName 屬性的物件，會洗掉指定的 “資料倉庫”，

呼叫時，若引數為一個僅指定了 name 屬性的物件，將洗掉指定的 “資料庫”（及其所有資料倉庫），

https://localforage.docschina.org/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/265942.html

標籤：其他

上一篇：3d立體相冊，情人節，情侶生日禮物代碼適用

下一篇：CSS基礎：Flex基本屬性

localforage 是什么？

安裝