直接发代码,不如说下思路,自己去想,其实设置本地存储时间,可谓太简单了
不映入cdn,先说直接在本地操作...
跟着我思路一起想首先你想下过期时间,用到了什么,对 ,是时间,好既然你知道,真牛,
在添加本地存储的时候,加入时间字段,取出来时,用 当前时间 - 存入时间 >= 自定义过期时间
使用场景:例如优化请求
上代码看看
Date.now()当前事件 new Date.getTime() 获取时间戳
第一
localStorage.setItem('cates', { time: Date.now(), data: this.data.cates })
//用{}形式 将当前时间,和要存数据,存入本地
第二
// 封装优化请求,请求的时候存本地且不过期,就使用本地数据,否则重新请求,
//在页面加载调用一下这个函数,不去直接调用getType请求接口
_setgetType() {
// 判断本地有没有数据
const cates = localStorage.getItem('cates');
if (!cates) { // 如果本地没有cates,就网络请求数据
this.getType()
} else {//本地有数据判断是否过期了//cates.time是本地的时间字段
if (Date.now() - cates.time > 1000 * 300 == true) {
this.getType()//当前时间 - 存的时间 > 5分钟 = 间隔时间 5分钟外就重新调用
} else {//有数据且没过期时
this.data.cates = cates.data;//将本地的数据赋值给定义的总数据data里的cates
//....想写的逻辑
console.log('本地有数据,且没有过期大于5分钟,不发送网络请求,使用渲染本地的数据');
}
}
},
完!
better late than never. 只要开始,虽晚不迟。
go for it! just do it! 加油!向前冲!做了再说!
下篇见