给 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);
	

完结😂😂