浏览器窗口刷新和关闭的判断

1.问题背景

数源平台的数据集超市，有这样一个业务需求，选中类型和组织在浏览器刷新的情况下，要记住之前选择的类型和组织，所以就需要把选中的组织和类型存放到sessionStorage中，但是这样会有一个问题，当浏览器的窗口关闭的时候，再次打开还是会出现之前选中的类型和组织，这肯定是有问题的；

2.问题分析

重新打开这个系统肯定是不需要去加载之前的，需要针对浏览器窗口刷新和关闭进行区分，当浏览器窗口关闭时需要清空之前存在sessionstorage中的类型和组织信息，由于浏览器窗口刷新和关闭都回走事件beforeunload和unload的回调，所以不能简单的通过这两个事件去判断浏览器的窗口是刷新还是关闭，

2.1 beforeunload

浏览器关闭前的监听回调,此事件将会询问用户是否确定离开当前页面。如果beforeunload的回调函数返回一个字符串，那么在新页面加载之前，字符串将会出现在展示给用户确认的对话框上，这样用户将会有机会取消跳转停留在当前页上;

2.2 unload

浏览器窗口关闭的回调，当用户离开当前文档转向其他文档时将会触发。
unload事件处理程序可以用于保存用户的状态，但其不能取消用户转向其他地方。

3.解决方案

但是经过研究发现，浏览器刷新和关闭这两个事件虽然都会触发，但是中间相差的间隔是不一样的，由于是重新刷新，浏览器只需要重新载入所以时间间隔特别端在1ms-3ms,如果是浏览器窗口关闭的话，时间间隔会稍微长一些，所以通过不断的去验证二者之间的时间差去判断浏览器窗口是关闭还是刷新；

4.代码逻辑

window.addEventListener("beforeunload", (e) => {
        this._beforeUnload_time = new Date().getTime();
        console.log(this._beforeUnload_time, "this._beforeUnload_time");
      });
window.addEventListener("unload", () => {
        this._gap_time = new Date().getTime() - this._beforeUnload_time;
        console.log(this._gap_time);
        if (this._gap_time <= 3) {
          //关闭
          localStorage.removeItem("classId");
          localStorage.removeItem("orgId");
          localStorage.removeItem("searchName");
        }});