vue 全局监听浏览器窗口关闭以及无痕模式场景提示

最新推荐文章于 2024-08-22 11:21:06 发布

heyNewbie

最新推荐文章于 2024-08-22 11:21:06 发布

阅读量1.4k

点赞数

分类专栏：前端 vue 文章标签： vue.js

本文链接：https://blog.csdn.net/heyNewbie/article/details/115624779

版权

本文介绍了在Vue项目中如何全局监听浏览器窗口关闭，以便在用户退出时清空localStorage并通知后台。同时，针对无痕模式导致的localStorage不可用问题，提出了特殊项目的解决方案，包括强制提示用户不要使用无痕模式。

摘要由CSDN通过智能技术生成

需求场景一：用户退出时清空localStorage并告知后台用户退出，保持登录状态时关闭窗口或者浏览器达到相同目的

实现：

// 在mounted中触发beforeunload事件以及在destroyed中触发beforeunload事件
// 当文档或一个子资源正在被卸载时, 触发 unload事件，unload在beforeunload之后被触发
// 参考地址：https://blog.csdn.net/weixin_45372546/article/details/108538026
// 要做到全局监听，我直接放在了入口文件中 因个人项目而异
data(){
    return {
        _beforeUnload_time:'',
        _gap_time:''
    }
},

mounted() {
    window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));
    window.addEventListener("unload", (e) => this.unloadHandler(e));
},
methods: {
    beforeunloadHandler(e) {
      this._beforeUnload_time = new Date().getTime();
      //e.returnValue = '关闭提示'; 弹窗
    },
    unloadHandler(e) {
      let _this = this;
      this._gap_time = new Date().getTime() - this._beforeUnload_time;
      //判断是窗口关闭还是刷新
      if (this._gap_time <&#