vue实现关闭浏览器退出登录功能（区别关闭和刷新）

vue实现关闭浏览器退出登录功能（区别关闭和刷新）

项目背景：需要实现关闭浏览器后，清除缓存，再次访问，重新登录

解决方法：

data() {
    
    
    return {
    
    
      gap_time: 0,
      beforeUnload_time: 0,
    };
  },
  methods: {
    
    
    // 关闭窗口之前执行
    beforeunloadHandler() {
    
    
      this.beforeUnload_time = new Date().getTime();
    },
    unloadHandler() {
    
    
      this.gap_time = new Date().getTime() - this.beforeUnload_time;
      //判断是窗口关闭还是刷新 毫秒数判断 网上大部分写的是5
      if (this.gap_time <= 10) {
    
    
        localStorage.clear();
        //logOut() // 退出登录接口 这里应当换为个人的登出方法
      } else {
    
    
        
      }
    },
  },
  destroyed() {
    
    
    // 移除监听
    window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
    window.removeEventListener("unload", () => this.unloadHandler());
  },
  mounted() {
    
    
    // 监听浏览器关闭
    window.addEventListener("beforeunload", () => this.beforeunloadHandler());
    window.addEventListener("unload", () => this.unloadHandler());
  }

sessionStorage，localStorage描述：
（1）sessionStorage(临时存储)：为没一个数据维持一个存储区域，浏览器打开会创建，关闭浏览器就会消失。
（2）localStorage(长期存储)：和前者一样，区别在于浏览器关闭后数据依然存在