1.实现背景
用户登录时的信息存在了localstorge中,但它会一直存在。一般来说,我们希望这个数据能够定期被清除掉,以下一个定时清除的实现。
2.实现原理
在用户登录时,将用户信息存入localstorge的同时,将当前时间作为时间戳也保存在localstorge中,然后需要验证的位置设置一个定时器,定时扫描时间戳状态:获取当前时间戳,然后减去之前存的时间戳,如果两者差值超过一定范围(过期时间/),则清除localstorge缓存即可。
3.代码实现
1.登录时候,存用户信息,当前时间:
localStorage.setItem("userInfo", JSON.stringify(res.data))
localStorage.setItem('timestamp', Date.now());
2.页面加载时,创建定时器,执行定时扫描,页面销毁前,清除定时器。
data(){
return{
checkLocalStorageInterval : null
}
},
created() {
// 在组件创建完成后启动定时器
this.startCheckLocalStorage();
},
beforeDestroy() {
// 在组件销毁前清除定时器
if (this.checkLocalStorageInterval) {
clearInterval(this.checkLocalStorageInterval);
}
},
3.定时器主要实现:
startCheckLocalStorage() {
this.checkLocalStorageInterval = setInterval(() => {
this.checkLocalStorageStatus();
}, 1000); //1s执行一次
},
checkLocalStorageStatus() {
const storedTimestamp =localStorage.getItem('timestamp'); //拿之前存的时间戳
// 如果没有时间戳或已超过1天,则清空数据
if (!storedTimestamp || Date.now() - storedTimestamp > 24 * 60 * 60 * 1000) {
this.clearLocalStorage();
}
},
clearLocalStorage() {
localStorage.removeItem('adminInfo'); //删除localstorge的数据
//todo 另外要执行的事情
//this.$router.push('adminLogin')
//console.log('localStorage has been cleared.');
}