突破本地离线存储的JS库 localforage

localforage 简介

项目地址 https://github.com/localForage/localForage

API中文地址 https://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

　　要使用的首选驱动。与上面的 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” 重命名为 “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'
});

 兼容性

• Android Browser 2.1
• Blackberry 7
• Chrome 23
• Chrome for Android 32
• Firefox 18
• Firefox for Android 25
• Firefox OS 1.0
• IE 10 (IE 8+ with localStorage)
• IE Mobile 10
• Opera 15 (Opera 10.5+ with localStorage)
• Opera Mobile 11
• Phonegap/Apache Cordova 1.2.0
• Safari 3.1 (includes Mobile Safari)

参考地址 https://www.zhangxinxu.com/wordpress/2018/06/js-localforage-localstorage-indexdb/