实现localStorage伪过期功能 类似效果

一、实现该需求的思路:因为localStorage的特性是永久保存,但现在我们要对他进行达到一定时间后自动过期又得怎麽做呢,所以,我就在时间上对他进行了操作,当我们存入数据的时候,一并将当时的时间也存进去,然后设置在未来的某一时间,达到那个时间的时候删除数据,也就形成了类似的过期功能,不懂local什么意思的自行查看我的另一篇原创文章--------Vue数据存储本地localStorage ES6-Map存本地Value未定义

     data: function() {
            return{
                data:[],
                getBaseList:[]
            }
        },
          mounted:function(){
                var _this = this
                _this.getBaseList = local.get('baseDataList')
                if(_this.getBaseList==='' || _this.getBaseList.serise==undefined){
                  _this.getBaseData();
                }else{
                  var nextNewTime = ''
                  nextNewTime = new Date().getTime()
                  _this.getBaseList = local.get('baseDataList')
                  var timeLag = nextNewTime-(_this.getBaseList.serise)
                  if(timeLag>=7200000){  //2小时后删除
                      local.remove('baseDataList')
                      _this.getBaseData();
                   }else{
                      _this.data = _this.getBaseList.listAll
                  }
            }
        },
            methods:{
               getBaseData:function(){
                var _this=this;
                var timeNew = ''
                var listSerise = {}
                $.ajax({
                    type: 'post',
                    url: '../../../data/coor.json',
                    data: {},
                    dataType:'json',
                    success: function (data) {
                        if (data.status === 200) {
                            _this.data=data.body.data;
                            timeNew = new Date().getTime()
                            listSerise = {
                                listAll:_this.data,
                                serise:timeNew
                            }
                            local.set("baseDataList", listSerise);
                        }else{
                            _this.$Message.error(data.message)
                        }
                    },
                    error: function () {
                        _this.$Message.error('请求失败,请稍后重试!')
                    }
                });
            },
      },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值