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引入


使用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 errors
    console.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 errors
    console.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 errors
    console.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 errors
    console.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 errors
    console.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 errors
    console.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