页面关闭或者刷新方法判断

页面关闭或刷新方法判断

在日常开发中遇到这样一个问题：

在每次页面登录的时候需要携带一个token，在登录之后进行刷新操作时，不能将前端存储的token与后端存储的token删掉，但是在页面关闭之后，需要同时清掉前后台的token。

因此找到浏览器的api，window.onBeforeUnload，window.onUnload，在页面刷新或者关闭时都会调用这两个api，因此无法直接判断用户是进行刷新操作还是关闭页面操作，所以需要换另外一个媒介来进行判断。

let beginTime = 0; //开始时间
let differTime = 0; //时间差
window.onunload = function () {
    differTime = new Date().getTime() - beginTime;
    if (differTime <= 50) {
        const authorization = window.localStorage.getItem("authorization")
        navigator.sendBeacon("logOut",authorization);
        console.log("这是关闭");
    } else {
        console.log("这是刷新");
    }
};

window.onbeforeunload = function () {
    beginTime = new Date().getTime();
};

因为这两个api中，window.onBeforeUnload先执行，window.onUnload后执行，所以在第一个api中进行一个开始时间的存储，然后在第二个api进行第二个结束时间的存储，并且得到他们的差值，判断如果差值时间在50ms以内，则为关闭页面，否则就为刷新页面。

而在页面关闭时进行的接口请求删除后端存储token的操作时，因为保证请求是否已经到后端并且结束，所以使用到了一个新的api：navigator.sendBeacon("logOut",authorization)，这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。