突破本地离线存储的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…