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页面,将路径引入
<script src="localforage.js"></script>
//引入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'  
});