localForage基本使用

一. localForage介绍

1.localForage是一个JavaScript库，能够类似localStorage的存储。
2.他是异步存储，可以优化你的web应用程序的离线体验，而且能存储多种类型的数据
3.localForage有一个优雅的降级策略，如果浏览器不支持indexedDB或者WebSQL则使用localStorage
4.支持es6的 Promises API,而且支持添加回调函数

二. 安装使用

//使用npm
npm install localforage
//使用bower
bower install localforage

//引入js页面,将路径引入
<script src="localforage.js"></script>
//引入vue页面
import localForage from "localforage";

三.使用localFroage进行存储

存储方面：不同于 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);
});

// 还有一些常用的其他属性
//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);
});

// 一些特殊的API
//setDriver：用来选择驱动或者配置数据库，应该放在第一个调用数据API之前调用。
//默认情况下，localForage会按照以下的顺序选择数据仓库的后后端驱动 IndexedDB WebSQL 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'  
});