beforeunload_event: developer.mozilla.org/zh-CN/docs/…
unload_event: developer.mozilla.org/zh-CN/docs/…

当文档或一个子资源正在被卸载时，触发 unload 事件
当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件 beforeunload是比unload快的

onunload，onbeforeunload都是在刷新或关闭时调用，可以在

onbeforeunload 是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用

触发`onbeforeunload`事件的有以下：

左上角按钮
Ctrl+R刷新
关闭窗口

事件测试

方法一：比较普遍的根据beforunload以及unload执行的间隔时间

谷歌浏览器

    unload() {
      this.unloadTime = new Date().getTime()
      window.localStorage.setItem('unloadTime', String(this.unloadTime))
      window.localStorage.setItem('beforeunloadTime', String(this.beforeunloadTime))
      window.localStorage.setItem('timer', String(this.unloadTime - this.beforeunloadTime))
      // 本地通过localStorage中的数据看出,关闭事件间隔小于1,刷新则大于8
      if (this.unloadTime - this.beforeunloadTime <= 5) {
        // 执行退出登录
        this.logOut()
        // window.localStorage.clear();
        window.localStorage.setItem('1111', String(this.unloadTime - this.beforeunloadTime))
      }
    },

测试刷新

关闭重新打开
两者的时间差是一秒

网上的说法是： 关闭事件间隔小于5(也有小于1),刷新则大于8

但这种方法并不是完全准确的，因为浏览器在处理这些事件时可能会有一些延迟。此外，不同浏览器之间两个方法的执行间隔时间不同，因此该方法会不太稳定

Microsoft Edge

关闭重新开打也是1

火狐

页面刷新时，只执行onunload；页面关闭时，只执行onbeforeunload事件？

写多个监听并不会冲突

  window.onload = onbeforeunload
        function onbeforeunload() {
            console.log('onload----ssssssssssss')
        }


        //错的  监听前面是没有on的
        // window.addEventListener('onload', e => beforeunloadHandler(e));
        window.addEventListener('load', e => loadHandler(e));

        function loadHandler() {
            console.log('onload----xxxxxxxxxxxxxx')
        }

方法二：

https://blog.csdn.net/night43/article/details/125278554
```
        window.onunload = function (e) {//执行该事件时将当前时间存入cookie
        // this.$cookies.set('_onbeforeTime', new Date().getTime());//格式：名称，值，时长（可不填）
         window.localStorage.setItem('_onbeforeTime', new Date().getTime())
    }

    window.onload = function (e) {
        const _unloadTime = new Date().getTime();
         // 火狐浏览器报错 Uncaught NS_ERROR_FILE_CORRUPTED
        const _onbeforeTime =  window.localStorage.getItem('_onbeforeTime') ? window.localStorage.getItem('_onbeforeTime') :'';//读取cookie值
        // this._onbeforeTime = this.$cookies.get('_onbeforeTime');//读取cookie值
        const _gap_time = _unloadTime - _onbeforeTime;//两个事件执行间隔时间
        /**判断间隔时间，需要进行测试。
        /* 这里测试出的数据关闭浏览器是在10000ms以上
        /* 刷新则是2000ms~9000ms
        */
        if (_gap_time > 10000) {
            //判断登录状态
            // if (!this.isLogin) window.localStorage.clear();
            window.localStorage.setItem('11111', '关闭了浏览器')
        }else{
            console.log("刷新了哦");
            window.localStorage.setItem('2222', '刷新了哦')
        }
        // this.$cookies.remove()//清除cookie缓存
    }
```

前端所有浏览器关闭和刷新都执行unload onload事件beforeunload事件的兼容性

参考：

www.jb51.net/article/789… www.cnblogs.com/wangyang021… blog.csdn.net/night43/art…

当用户关闭浏览器的时候,自动退出系统

触发onbeforeunload事件的有以下：