vue监听页面刷新和离开事件

℡╮荆棘鸟゛

于 2024-06-27 16:37:42 发布

阅读量439

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_25239049/article/details/140017194

版权

mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))
    window.addEventListener('visibilitychange', e => this.visibilitychange(e))
   // window.addEventListener('resize', this.debouncedCheckDeviceAndRedirect);
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
    window.removeEventListener('visibilitychange', e => this.visibilitychange(e))
  },
  methods: {
    // 关闭app 记录用户停留时间入库
    beforeunloadHandler() {
      this._beforeUnload_time = new Date().getTime();
    },
    // 关闭app 记录用户停留时间入库
    unloadHandler(e) {
      this._gap_time = new Date().getTime() - this._beforeUnload_time;
      // debugger
      // 判断是窗口关闭还是刷新
      if (this._gap_time <= 5) {
        // 如果是登录状态，关闭窗口前，移除用户
        localStorage.setItem('isLogin', 1);
      }else{
        localStorage.setItem('isLogin', 2);
      }
    },
    visibilitychange(e) {
      this._gap_time = new Date().getTime() - this._beforeUnload_time;
      // debugger
      // 判断是否离开窗口
      if (this._gap_time <= 5) {
        // 如果是登录状态，关闭窗口前，移除用户
        localStorage.setItem('isLogin', 3);
      }else{
        localStorage.setItem('isLogin', 4);
      }
    }
    }