一般我们前端存储数据一般会考虑到
localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
或者cookie 4k
但是一旦本地前端对数据存储要求比较高 比如聊天记录 等对缓存容积比较高的 比如超过5M 就要想别的办法了 比如优秀的indexDB
IndexedDB列举：
IndexedDB是一个事务型数据库系统，类似于基于SQL的RDBMS。 然而，不像RDBMS使用固定列表，IndexedDB是一个基于JavaScript的面向对象的数据库。 IndexedDB允许您存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。 您只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。
- 阅读更多关于 IndexedDB背后的概念。
- 从使用IndexedDB指南的第一准则中学习异步使用IndexedDB。
- 联合使用IndexedDB储存离线数据和Service Workers储存离线资源，其简述请查看Service Workers制作离线PWAs。
localforage.js
https://localforage.docschina.org/
# LOCALFORAGE
**改进的离线存储**
// 通过 localStorage 设置值
localStorage.setItem('key', JSON.stringify('value'));
doSomethingElse();
// 通过 localForage 完成同样功能
localforage.setItem('key', 'value').then(doSomethingElse);
// localForage 同样支持回调函数
localforage.setItem('key', 'value', doSomethingElse);
如果只是介绍确实太无聊，所以我们开始撸码
代码核心了各位小伙伴
import localforage from 'localforage';
const indexdbVersion = 'webDB';
// 配置不同的驱动优先级
localforage.config({
driver: [
localforage.INDEXEDDB,
localforage.WEBSQL,
localforage.LOCALSTORAGE],
name: 'WebSQL-Rox'
});
//获取本地数据
//为啥要用异步因为不用的话会拿不到数据
const getLocalforage = (name) => {
return new Promise((resolve, reject) => {
localforage.getItem(name).then(function (value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
allMessageList = value
resolve(value)
}).catch(function (err) {
// 当出错时，此处代码运行
console.log(err);
reject()
});
})
}
//获取数据
const getData= async ()=>{
const allMessageList = await getLocalforage(indexdbVersion);
return allMessageList
}
//设置数据
const setData = ()=>{
const allMessageList = ['a','b','c']
localforage.setItem(indexdbVersion, allMessageList )
}
//初始化
setData();
console.log('**************获取存储数据****************')
console.log(getData()))
image.png
记得要用缓存用谷歌浏览查看 比较方便; 好了 基本流程已经实现
记得点赞 好不容易写博客了~~
