区分浏览器关闭和刷新

 

      其实本身浏览器关闭和刷新没有区别的太开，下面介绍两种场景，逻辑一是关闭页面时需要区分出是刷新还是关闭，逻辑二是进入页面时需要区分刷新还是重新进入页面，下面结合实例看一下

先介绍几个会用到的事件

• onload：页面载入时触发
• onbeforeunload: 在即将离开页面(刷新或关闭)时触发
• onunload： 退出页面时触发，已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用

页面加载时只执行onload
页面关闭时先执行onbeforeunload，最后onunload
页面刷新时先执行onbeforeunload，然后onunload，最后onload。

逻辑1：（适用于关闭或者刷新时做一些特殊业务逻辑）关闭页面时的逻辑

let beforeTime = 0, leaveTime = 0;

window.onunload = () => {
     leaveTime = new Date().getTime() - beforeTime;
     if (leaveTime <= 5) {
          console.log("====关闭=====");
          sessionStorage.clear();
     } else {
          console.log("====刷新=====");
     }
};

window.onbeforeunload = () => {
     beforeTime = new Date().getTime();
};

以上方法完全可以区分刷新和关闭，但是在你按着f5不动的情况下，onbeforeunload与onunload的时间差也会小于5，从而执行了sessionStorage.clear()，以至达不到效果

 

逻辑2：（主要解决是刷新页面还是进入页面）进页面时的逻辑处理

方法一：

const now = new Date().getTime();
const leaveTime = parseInt(localStorage.getItem('leaveTime'), 10);
const refresh = (now - leaveTime) <= 5000;
alert(refresh ? '刷新' : '重新登陆');
window.onunload = () => {
     window.localStorage.setItem('leaveTime', new Date().getTime());
};

方法二：

主要就是通过判断载入页面的时间（onload事件）和上次退出页面（onunload）之间的时间差，在每次退出页面（刷新或关闭）时，都往localStorage存值，在载入时取localStorage的值，并且取到载入时的时间与之相减，得到差值，从而判断用户是刷新操作还是关了页面又通过历史记录进来的操作。将onload事件放到了最上面，之所以这样做是避免受网络速度影响导致载入的时间或长或短从而无法控制在一个具体的范围内。

var initTime = () => {
      loadTime = new Date().getTime();
      unloadTime = localStorage.getItem('unloadTime');
      localStorage.setItem('loadTime', loadTime);
      localStorage.setItem('nowload', loadTime - unloadTime);
      const gap = loadTime - unloadTime;
      if (gap > 2000) {
           sessionStorage.clear();
           console.log("重新进入页面");
      } else {
           console.log("刷新页面");
      }
};

initTime();

let loadTime = 0, unloadTime = 0 ;
window.onunload = function(){
      unloadTime = new Date().getTime();
      localStorage.setItem('unloadTime', unloadTime);
};

 

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！