本地存储如何设置过期时间

在添加本地存储的时候,加入时间字段,取出来时,用 当前时间 - 存入时间 >= 自定义过期时间

使用场景:例如优化请求 ,变化不大的商品分类数据,选择收获的地址库

上代码看看

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分钟,不发送网络请求,使用渲染本地的数据');
      }
 
    }
  },

你可能感兴趣的:(vue,vue3,前端,postman,vue.js,前端框架)