结论：使用浏览器数据库indexDB存储，推荐使用第三方库：localForage
indexDB介绍
| 特性 | cookie | localStorage | sessionStorage | indexedDB |
|---|---|---|---|---|
| 数据生命周期 | 一般由服务器生成，可以设置过期时间；前端采用和js-cookie等组件也可以生成 | 除非被清理，否则一直存在；浏览器关闭还会保存在本地，但是不支持跨浏览器 | 页面关闭就清理刷新依然存在，不支持跨页面交互 | 除非被清理，否则一直存在 |
| 数据存储大小 | 4K | 5M | 5M | 不限制大小 |
| 与服务端通信 | 每次都会携带在请求的header 中，对于请求性能有影响；同时由于请求中都带有，所以也容易出现安全问题 | 不参与 | 不参与 | 不参与 |
| 特点 | 字符串键值对在本地存储数据 | 字符串键值对在本地存储数据 | 字符串键值对在本地存储数据 | IndexedDB 是一个非关系型数据库（不支持通过 SQL 语句操作）。可以存储大量数据，提供接口来查询，还可以建立索引，这些都是其他存储方案无法提供的能力。 |
localForage介绍
- localForage是一个JavaScript库，能够类似localStorage的存储。
- 他是异步存储，可以优化你的web应用程序的离线体验，而且能存储多种类型的数据。
- localForage有一个优雅的降级策略，如果浏览器不支持indexedDB或者WebSQL则使用localStorage。
- 支持es6的 Promises API,而且支持添加回调函数。
localForage安装
npm install localforage
localForage使用
不同于localStorage，你可以存储非字符串类型,存储方式是localForage.setItem(key, value),可以加入第三个参数回调函数，但是因为支持promise，所以一般用then，catch来处理，推荐配合async和await使用。
import localForage from "localforage";
//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);
}
讲故事
- 事情起因是最近在写聊天功能，是安卓内嵌h5，在考虑聊天记录存储问题时因为明白localStorage的大小只有5m所以第一时间想到的是调用安卓接口使用用户的手机存储，于是和安卓开发商讨，他问为什么要用他的存储呢，我坚定不移表示前端的存储能力只有5m，安卓表示我可以存数据库啊，我诧异的想前端怎么会有数据库，再然后就明白了indexDB的存在，遥想之前做图片模糊功能也是，以为浏览器没有模糊图片的能力，但是使用css样式filter:blur(5px)就可以做到了。
- web的能力并没有想象那么窄。
参考文章：
- 作者：叫叫技术团队 链接：juejin.cn/post/723925…
- 作者：小猪课堂 链接：juejin.cn/post/702690…
- 作者：coolFish 链接：juejin.cn/post/690761…
