Vue中引入使用 localforage 改进本地离线存储（突破5M限制）

1. 简介

说到本地存储数据，首先想到的是 localStorage，应该很多小伙伴都用过，使用很简单。然而，localStorage 却有下面一些缺点：

存储容量限制，大部分浏览器应该最多5M。我就遇到过localStorage存储字符然后尺寸爆掉的情况；
仅支持字符串，如果是存对象还需将使用 JSON.stringify 和 JSON.parse 方法互相转换，有些啰嗦；
读取都是同步的。大多数情况下，还挺好使的。如果存储数据比较大，如一张重要图片base64格式存储了，再读可能会有可感知的延迟时间；

localforage 的作用就是用来规避上面 localStorage 的缺点，同时保留 localStorage 的优点而设计的。
localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的 异步存储 来改进你的 Web 应用程序的离线体验。

它能存储多种类型的数据，而不仅是字符串（包括：Array、ArrayBuffer、Blob、Float32Array、Float64Array、Int8Array、Int16Array、Int32Array、Number、Object、Uint8Array、Uint8ClampedArray、Uint16Array、Uint32Array、String）。

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

localForage 提供回调 API 同时也支持 ES6 Promises API，可以自行选择。

传送门：localForage 中文文档

2. 使用方法

安装

npm i localforage

localforage npm 地址
引入

// main.js
import localForage from 'localforage';
Vue.prototype.$forage = localForage;

<template><div><button @click="forageSetVal">forageSetVal</button><button @click="forageGetVal">forageGetVal</button><button @click="forageRemoveVal">forageRemoveVal</button><ul><li v-for="item in userInfos" :key="item.name">{{item.name}} | {{item.city}}</li></ul></div>
</template><script>
export default {data() {return {userInfos:[],};},methods:{// 保存数据forageSetVal(){const userList = [{name:'张三',city:'北京',},{name:'李四',city:'南京',},{name:'王五',city:'深圳',}]/** setItem(key, value, successCallback)* 将数据保存到离线仓库。*/this.$forage.setItem('userList', userList).then((val) => {console.log('setItem',val)}).catch(err => {console.log(err)})},// 获取数据forageGetVal(){/** getItem(key, successCallback)* 从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。* 当存储 undefined 时， getItem() 也会返回 null。由于 localStorage 限制，同时出于兼容性的原因 localForage 无法存储 undefined。*/this.$forage.getItem('userList').then((val) => {console.log('getItem',val)this.userInfos = val;}).catch(err => {console.log(err)});},// 从离线仓库中删除 key 对应的值forageRemoveVal(){/** removeItem(key, successCallback)* 从离线仓库中删除 key 对应的值。*/this.$forage.removeItem('userList').then(() => {console.log('removeItem');}).catch(function(err) {console.log(err);});},},
};
</script>

先触发 forageSetVal 保存数据

再触发 forageGetVal 获取数据

最后触发 forageRemoveVal 删除数据

3. localforage 和 indexDB 的区别

indexDB 为本地数据库存储，其功能非常强大，再复杂的结构存储都不在话下。localStorage 只是使用了其功能中的一部分，很多功能受限，如：localStorage 一次只能存一个字段。
indexDB几乎空间无限，性能也不错，各种数据结构都支持，为何总感觉在业内不温不火呢？
很重要的原因之一就是上手成本，包括2方面：

前端需要了解数据库的一些基本概念，如：表，游标，事务，锁等。而业界普遍的前端都是与页面打交道的，数据库操作属于后端的后端了，离的有些远，于是，很多前端都不了解，需要从零开始的数据库学习；
indexedDB 的 API 又多又长又纷杂，学习成本高，容易记不住，网上好的资源少；

localforage 的出现可谓曲线救国，通常我们的数据存储并不需要特别复杂，只要不是完完全全的离线开发，localforage 足矣。既不浪费 indexDB 的好，又避开了 indexDB 高上手成本的坑。从这个角度看，indexDB 应该要谢谢 localforage。
当然，如果存储的数据是负责的多行多列表结构，还是老老实实花点功夫学习学习 indexDB 的使用。