localForage:離線存儲(chǔ)的改進(jìn)版本

wmui 發(fā)布于2019-08-20 11:57 / 1206人閱讀

摘要：獲取數(shù)據(jù)并使用回調(diào)函數(shù)移除對(duì)應(yīng)的鍵清除所有鍵。對(duì)數(shù)據(jù)庫(kù)中的每一個(gè)鍵值對(duì)調(diào)用回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)分別是鍵值鍵索引迭代次數(shù)基于。

前言

最近在看IDB，IDB是一種對(duì)象數(shù)據(jù)庫(kù)存儲(chǔ)方式，查詢數(shù)據(jù)有游標(biāo)法、事務(wù)法、索引法，使用的API很多，比較難記。

localForage是一個(gè)改善web-app離線數(shù)據(jù)存儲(chǔ)的JavaScript庫(kù)，核心在于使用一個(gè)和localStorage類似的API，比較簡(jiǎn)單好記。而且存儲(chǔ)的數(shù)據(jù)類型不只是字符串，可以是數(shù)值、對(duì)象、布爾值、數(shù)組，但是undefined除外。默認(rèn)情況下，依次優(yōu)先采用使用IDB、WebSQL、localStorage進(jìn)行后臺(tái)存儲(chǔ)。
使用localForage只需要在頁(yè)面包含js文檔即可，下載鏈接：
https://github.com/localForag...
該項(xiàng)目的具體GITHUB地址

API

1）setItem(key, value, successCallback)：創(chuàng)建一個(gè)鍵，參數(shù)是鍵名、鍵值、回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)是對(duì)應(yīng)的鍵值。

// Unlike localStorage, you can store non-strings.
localforage.setItem("my array", [1, 2, "three"]).then(function(value) {
    // This will output `1`.
    console.log(value[0]);
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

2）getItem(key, successCallback):獲取數(shù)據(jù)并使用回調(diào)函數(shù)

localforage.getItem("somekey", function(err, value) {
    // Run this code once the value has been
    // loaded from the offline store.
    console.log(value);
});

3）removeItem(key, successCallback)：移除對(duì)應(yīng)的鍵

localforage.removeItem("somekey").then(function() {
    // Run this code once the key has been removed.
    console.log("Key is cleared!");
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

4）clear(successCallback)：清除所有鍵。

localforage.clear().then(function() {
    // Run this code once the database has been entirely deleted.
    console.log("Database is now empty.");
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

5）length(successCallback)：獲得離線存儲(chǔ)的總的鍵數(shù)。

localforage.length().then(function(numberOfKeys) {
    // Outputs the length of the database.
    console.log(numberOfKeys);
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

6）key(keyIndex, successCallback)：根據(jù)鍵索引得到鍵值。
7）keys(successCallback)：得到所有的鍵索引。
8）iterate(iteratorCallback, successCallback)：對(duì)數(shù)據(jù)庫(kù)中的每一個(gè)鍵值對(duì)調(diào)用回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)分別是鍵值、鍵索引、迭代次數(shù)（基于1）。

// The same code, but using ES6 Promises.
localforage.iterate(function(value, key, iterationNumber) {
    // Resulting key/value pair -- this callback
    // will be executed for every item in the
    // database.
    console.log([key, value]);
}).then(function() {
    console.log("Iteration has completed");
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

或許并不一定要迭代所有的鍵值對(duì)，此時(shí)只要返回一個(gè)非undefined類型值，就可以提前結(jié)束迭代，這個(gè)返回值會(huì)作為successCallback的參數(shù)。這個(gè)方法有點(diǎn)問題，返回的值不太對(duì)：



  
    Listing 2.1

前面提到，localForage在默認(rèn)情況下會(huì)優(yōu)先采用使用IDB、WebSQL、localStorage進(jìn)行后臺(tái)存儲(chǔ)，但是可以通過setDriver()進(jìn)行后臺(tái)設(shè)置，如果設(shè)置的機(jī)制在當(dāng)前瀏覽器并不支持，則還是按照默認(rèn)選擇。
setDriver(driverName)/setDriver([driverName, nextDriverName]):設(shè)置后臺(tái)支持機(jī)制，參數(shù)是localforage.INDEXEDDB、localforage.WEBSQL、localforage.LOCALSTORAGE。