优秀的浏览器端的数据存储方式-localforage

我是大龄程序员
1,095 阅读6分钟

浏览器端的数据存储也就是本地存储，常见的方式有cookie，storage，另外也有indexDB，webSQL。

目前使用率最高的当之无愧为Web Storage API，也就是localStorage和sessionStorage，API简单，读取效率高。然后是indexedDB。indexedDB的优势为存储空间大，且支持各种数据结构，性能也没有问题。在5M内的存储领域，indexedDB并非首选。另外WebSQL已被H5标准放弃，而元老级的Cookie也不再适合现代的客户端存储任务。

localforage是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。localforage可以实用方便地去操作数据，比直接使用indexDB，webSQL 方便多了

localforage采用优雅降级策略，默认情况下，若浏览器不支持indexedDB 或 WebSQL，则使用 localStorage。所以，在优先选用indexedDB存储的前提下，兼容性也得以保证，在所有主流浏览器中都可使用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

npm install localforage

1. 相似api:

  • setItem(key, value, successCallback)：

将数据保存到离线仓库

```
// promise使用方式
localforage.setItem('key', 'value').then(doSomethingElse); 

// 回调函数方式
localforage.setItem('key', 'value', doSomethingElse);
  • getItem

从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。

 localforage.getItem('key').then(doSomething)
  • removeItem(key, successCallback)

从离线仓库中删除 key 对应的值。

  • clear(successCallback)

从数据库中删除所有的 key，重置数据库。

  • key(keyIndex, successCallback)

根据 key 的索引获取其名

localforage.key(6).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);
});

2. 设置后端驱动Api

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

3. 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 的值格式相同。
    默认值：[localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE]

  • name

    数据库的名称。可能会在在数据库的提示中会出现。一般使用你的应用程序的名字。在 localStorage 中，它作为存储在 localStorage 中的所有 key 的前缀。
    默认值：'localforage'

  • size

    数据库的大小（以字节为单位）。现在只用于WebSQL。 默认值：4980736

  • storeName

    数据仓库的名称。在 IndexedDB 中为 dataStore，在 WebSQL 中为数据库 key/value 键值表的名称。仅含字母和数字和下划线。 任何非字母和数字字符都将转换为下划线。
    默认值：'keyvaluepairs'

  • version

    数据库的版本。将来可用于升级; 目前未使用。
    默认值：1.0

  • description

    数据库的描述，一般是提供给开发者的。
    默认值：''

 与大多数 localForage API 不同，该 config 方法是同步的。

4. 驱动 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）为 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。

5. 多实例

你可以创建多个 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 的新实例。每个实例对象都有独立的数据库，而不会影响到其他实例。

6. 存储类型：

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

详情文档

avatar
文章
阅读
粉丝