给 localStorage 设置过期时间

思路

        /**
         * 1. 存储你当前存储数据的时间
         * 2. 设置过期时间 这里为(两秒)
         * 3. (重点)用当前的时间 减去 存储数据的时间  如果 大于 您设置的过期时间 
         *    则localstorage视为过期 ,反之 当前 localstorage 没有过期
         * 4. 过期则删除本地存储
         */ 

代码实现 1.0

HTML

<button class="box">记住密码</button>

Javascript


      // 封装存储  @==}}=====>>  你当前存储数据的时间
     function setlocalstorage(key,data){
            // 获取当前的时间
            let FirstTime = new Date().getTime();
            // 将当前时间存储本地
           return localStorage.setItem(key,JSON.stringify({
                data,
                time:FirstTime
            })) 
        }
        // 模拟接口数据
       let data = [{ name:"lww",age:19},{name:"mtl",age:18}];
		
       setlocalstorage("obj",data);
      function  getlocalstorage(key,Exp){
         let data = localStorage.getItem(key);
         let newdata =JSON.parse(data);
         if(!data){return;};
         if(new Date().getTime() - newdata.time >Exp ){
             console.log("过期了");
             //localStorage.removeItem(key);
             return;
         }else{
             console.log("没有过期");
             return;
         }
      }
    // 设置过期时间 
    let remenber = document.querySelector(".box");
        remenber.addEventListener("click", () => {
            getlocalstorage("obj",5000);
        })
   

改进 2.0

	// 设置一个过期时间
	function setStorage(key, data) {
	  localStorage.setItem(key, JSON.stringify(data));
	  if (data.time) {
	    let nowTime = new Date().getTime();
	    let expireTime = new Date(data.time).getTime();
	    if (nowTime >= expireTime) {
	      localStorage.removeItem(key);
	      return false;
	    }
	  }
	  return true;
	}
	
	// 模拟
	let timeId = null;
	clearInterval(timeId);
	timeId = setInterval(() => {
	  let data = { time: '2023-08-01 17:56:00', data: "125114" };
	  let flag = setStorage('lww', data);
	  console.log(flag);
	  if (!flag) {
	    clearInterval(timeId);
	    console.log("清空了");
	  }
	}, 1000);
	

完结😂😂

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值