vue -关于浏览器localstorge数据定期清除的实现

1.实现背景

用户登录时的信息存在了localstorge中,但它会一直存在。一般来说,我们希望这个数据能够定期被清除掉,以下一个定时清除的实现。

2.实现原理

在用户登录时,将用户信息存入localstorge的同时,将当前时间作为时间戳也保存在localstorge中,然后需要验证的位置设置一个定时器,定时扫描时间戳状态:获取当前时间戳,然后减去之前存的时间戳,如果两者差值超过一定范围(过期时间/),则清除localstorge缓存即可。

3.代码实现

1.登录时候,存用户信息,当前时间:

js 复制代码
 localStorage.setItem("userInfo", JSON.stringify(res.data))
 localStorage.setItem('timestamp', Date.now());

2.页面加载时,创建定时器,执行定时扫描,页面销毁前,清除定时器。

js 复制代码
data(){
	return{
	checkLocalStorageInterval : null
	}
},
created() {
    // 在组件创建完成后启动定时器
    this.startCheckLocalStorage();
  },
 beforeDestroy() {
    // 在组件销毁前清除定时器
    if (this.checkLocalStorageInterval) {
      clearInterval(this.checkLocalStorageInterval);
    }
  },

3.定时器主要实现:

js 复制代码
	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.');
    }
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8508 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀10 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce11 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript