localforage本地存储(融合Web Storage,Web SQL Database,ndexedDB三种前端存储)

介绍

localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储（IndexedDB 或 WebSQL）和简单的类 localStorage 的 API ，localForage 能改善 Web 应用的离线体验。

在不支持 IndexedDB 或 WebSQL 的浏览器中，localForage 使用 localStorage。

可用于 收集用户使用日志 ，存储大量数据（需要支持IndexedDB 或 WebSQL）

前端本地存储

Cookie：一种小型的客户端和服务器小文本文件。（有条数限制,每条最大4kb左右）。
Web Storage：HTML5引入，包括localStorage和sessionStorage。（最大可存5Mb左右）。
IndexedDB：一个非关系型数据库，可以存储大量数据，支持索引，无需手动进行序列化和反序列化。（无存储大小限制，老版本浏览器兼容性差）。
Web SQL Database：类似于关系型数据库的操作方式，可以存储大量数据，无需手动进行序列化和反序列化。（无存储大小限制，兼容性差，已被废弃）。
File API：HTML5引入，可访问用户的本地文件系统。（安全性和兼容性差）。

localforage使用

1.引入插件

直接script引入
<script src="localforage/dist/localforage.js"></script>使用npm安装并导入
npm install localforage
import localForage from "localforage";

2.配置localforage，数据交互之前，必须先调用 config()

localforage.config({driver      : localforage.WEBSQL, // 指定某个,需要注意浏览器兼容性//driver      : [localforage.WEBSQL, localforage.INDEXEDDB, localforage.LOCALSTORAGE], // 指定使用顺序,哪个可用先用哪个name        : 'myApp', // 数据库名称version     : 1.0, // 数据库版本size        : 4980736, // 数据库的大小，单位为字节。现仅 WebSQL 可用storeName   : 'keyvaluepairs', // 仅接受字母，数字和下划线description : 'some description', // 描述信息
});

3.[可选]配置多个实例

var mainStore = localforage.createInstance({name: "nameHere",storeName   : 'tableOne',description : '...'
});var otherStore = localforage.createInstance({name: "otherName"
});// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
mainStore.setItem("key", "value");
otherStore.setItem("key", "value2");//删除该实例
otherStore.dropInstance().then(function() {console.log('Dropped the store of the current instance');
});

4.增删改查等功能，支持promise，async/await，回调函数三种方式

//支持promise格式,官方推荐
localforage.setItem('somekey', 'some value').then(function (value) {// Do other things once the value has been saved.console.log(value);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//支持async/await格式
try {const value = await localforage.getItem('somekey');console.log(value);
} catch (err) {console.log(err);
}
//支持回调函数
localforage.removeItem('somekey', function(err) {console.log(err);
});
//清空
localforage.clear().then(function() {// Run this code once the database has been entirely deleted.console.log('Database is now empty.');
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取记录的条数
localforage.length().then(function(numberOfKeys) {// Outputs the length of the database.console.log(numberOfKeys);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取id为2的数据
localforage.key(2).then(function(keyName) {// Name of the key.console.log(keyName);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取所有的key值
localforage.keys().then(function(keys) {// An array of all the key names.console.log(keys);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//迭代
localforage.iterate(function(value, key, iterationNumber) {// Resulting key/value pair -- this callback// will be executed for every item in the// database.console.log([key, value]);
}).then(function() {console.log('Iteration has completed');
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});//其他api
localforage.driver(); // 返回config配置的name的值
localforage.supports(localforage.INDEXEDDB); // 判断是否支持INDEXEDDB,返回true/false
//判断是否准备就绪
localforage.ready().then(function() {// This code runs once localforage// has fully initialized the selected driver.console.log(localforage.driver()); // LocalStorage
}).catch(function (e) {console.log(e); // `No available storage method found.`// One of the cases that `ready()` rejects,// is when no usable storage driver is found
});
//删除指定实例
localforage.dropInstance({name: "otherName"
}).then(function() {console.log('Dropped otherName database').
});

参考https://localforage.github.io/localForage/#localforage

参考https://github.com/xmoyking/localForage-cn

在vue中使用

1.安装依赖

npm install  --save localforage vlf

2.引入依赖

//在main.js中引入
import Vlf from 'vlf'
import localforage from 'localforage'
Vue.use(Vlf, localforage)

3.使用插件存取数据

// 创建实例
this.$vlf.createInstance({storeName: 'user'
})
// 迭代
this.$vlf.iterate((value, key, num) => {console.log(key);
});
// 设置值
this.$vlf.setItem('test', 'hello').then(v => {console.log(v);
});
//其他和官方使用一致

参考https://github.com/dmlzj/vlf