localForage的离线存储

localForage-离线存储不再头疼

1. localForage介绍
   localForage是一个JavaScript库，能够类似localStorage的存储。
   他是异步存储，可以优化你的web应用程序的离线体验，而且能存储多种类型的数据。
   localForage有一个优雅的降级策略，如果浏览器不支持indexedDB或者WebSQL则使用localStorage。
   支持es6的 Promises API,而且支持添加回调函数。
2. 安装localForage
   //使用npm
   npm install localforage
   //使用bower
   bower install localforage
   复制代码
   引入页面使用
   //引入js页面,将路径引入

//引入vue页面
import localForage from “localforage”;
复制代码
3. 使用localForage进行存取
存储方面：不同于 localStorage，你可以存储非字符串类型 ，存的方式是localForage.setItem(key, value),可以加入第三个参数回调函数，但是因为支持promise，所以一般用then，catch来处理，当然还有最推荐的async和await。
//1：存普通数据
localforage.setItem(‘somekey’, ‘some value’).then(function (value) {
// 当值被存储后，可执行其他操作
console.log(value);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
//2：存一个数组
localforage.setItem(‘myarray’, [1, 2, ‘three’]).then(function(value) {
// 如下输出 1
console.log(value[0]);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
//3：async/await
try {
//await返回结果值，用一个常量接收
const value = await localforage.getItem(‘somekey’);
console.log(value);
} catch (err) {
console.log(err);
}
复制代码
取值：这个没啥好说的，就是根据键取值。
localforage.getItem(‘somekey’).then(function(value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
复制代码
4. 一些常用属性扩展
REMOVEITEM:删除key对应的值。
CLEAR：删除所有的key，并且重置数据库。
LENGTH:获取仓库中key的长度。
keys：获取数据仓库中所有的key。
iterate:迭代数据库中所有的键值对，如果有一个value是undefined，就会推出，并且将 该键传入成功回调内。
//1：removeItem示例
localforage.removeItem(‘somekey’).then(function() {
// 当值被移除后，此处代码运行
console.log(‘Key is cleared!’);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
//2: clear示例
localforage.clear().then(function() {
// 当数据库被全部删除后，此处代码运行
console.log(‘Database is now empty.’);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
//3:length示例
localforage.length().then(function(numberOfKeys) {
// 输出数据库的大小
console.log(numberOfKeys);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
//4:keys示例
localforage.keys().then(function(keys) {
// 包含所有 key 名的数组
console.log(keys);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
//5:iterate示例
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);
});
复制代码
5. 一些有趣的特殊API
setDriver：用来选择驱动或者配置数据库，应该放在第一个调用数据API之前调用。

默认情况下，localForage会按照以下的顺序选择数据仓库的后后端驱动。

1. IndexedDB

2. WebSQL

3. localStorage

// 强制设置 localStorage 为后端的驱动
localforage.setDriver(localforage.LOCALSTORAGE);
// 列出可选的驱动，以优先级排序，下例，优先WEBSQL
localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);
复制代码
config:见词思意，用来配置localForage的API，在调用localForage之前必须先调用，此方法设置的任何值都将保留，属性较多，案例详解。
localforage.config({
// 将数据库从 “localforage” 重命名为 “Hipster PDA App”
name: ‘Hipster PDA App’
// 配置不同的驱动优先级
driver: [localforage.WEBSQL,
localforage.INDEXEDDB,
localforage.LOCALSTORAGE],
//size：数据库的大小（以字节为单位）。现在只用于WebSQL。 默认值：4980736
size:‘100000’,
//version：将来用来升级
version：‘1.0’
});