需求背景：

为保证‘高度安全性’，用户每次退出页面或浏览器都要清除登陆信息，每次进入系统都要重新登陆（每次登陆还要手机验证码等乱七八糟的验证信息，，，求用户的心里阴影面积），但是刷新页面不可以清除登陆信息。 

解决思路：

javascript 对于浏览器的关闭和刷新会触发两个事件 onbeforeunload()和onunload()，问题在于如何区分用户是想刷新还是退出（此时应该将用户催眠，然后获得用户的思想，预判用户走位及操作。。。），本文主要记录这两个方法的区别，设备兼容性及如何催眠用户（开玩笑的），是如何区分刷新和退出浏览器.

onbeforeunload()和onunload()

onbeforeunload 和 onunload 都是在页面刷新或退出时触发的事件

用法：

区别：

1. unbeforeunload()是在页面刷新或关闭之前触发的事件，而onubload()是在页面刷新或关闭之后才会触发的。 

2. unbeforeunload()事件执行的顺序在onunload()事件之前发生。 

3. unbeforeunload()事件可以禁止onunload()事件的触发。 

4. onunload()事件是无法阻止页面关闭的。

兼容性（pc）：

注意：onbeforeunoad 在移动端基本都不兼容，onunload则兼容大部分主流移动端浏览器

参考文献：MDN: window.onbeforeunload,MDN: window.onunload

区分刷新和退出

在浏览器关闭前是无法判断用户是刷新还是退出，所以我们在用户再次打开的时候来判断用户是否刷新 ,解决思路：

1. 用户关闭浏览器时，记录当前时间，并存于浏览器缓存中
2. 用户再次打开页面时，获取上次退出的时间，并于当前时间进行比较，若小于5s则表示用户执行的是刷新操作，若大于5s则判定为退出

注意： 5s并非固定，要根据实际情况调整  

上代码：

// 进入页面执行
// 记录当前时间并转成时间戳
const now = new Date().getTime();
// 从缓存中获取用户上次退出的时间戳
const leaveTime = parseInt(localStorage.getItem('leaveTime'), 10);
// 判断是否为刷新，两次间隔在5s内判定为刷新操作
const refresh = (now - leaveTime) <= 5000;
// 测试alert
alert(refresh ? '刷新' : '重新登陆');

// 退出当前页面执行
window.onunload = function(e){ // ios 不支持 window.onbeforeunload()
  // 将退出时间存于localstorage中
  localStorage.setItem('leaveTime', new Date().getTime());
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/3447