区分浏览器的刷新和浏览器的关闭

需求: 在关闭浏览器时发送请求,刷新时不发送请求。

方法一

1.在 mounted中,加入回调函数

   window.addEventListener("unload", (e) => this.unloadHandler(e));
   window.addEventListener("load", (e) => this.loadHandler(e));

2.定义函数

  unloadHandler(e) {
      // 判断是刷新还是关闭网站
    let unloadDate = new Date().getTime() + "";
    sessionStorage.setItem("unload_time", unloadDate);
    setTimeout(() => {
        // 在里面打印或者debbug都是无效的,不显示
        // 但是关闭浏览器时,数据会存到sessionStorage里面去,同域名可见
      let loadDate = localStorage.getItem("_load_Time");
      // 打开两个窗口,同域名下可以查看localStorage数据
      if (!loadDate || Number(unloadDate) >= Number(loadDate)) {
           // 刷新的时候,不进来
          // 关闭的时候进来
          // 验证
        localStorage.setItem("closeBrowser", "1"); // 会存入成功!!!!!!
        // 不能进行请求,发送请求无效
        fetch(`/usr/app1`, {
          method: "GET",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            Authorization: sessionStorage.getItem("token"),
          },
          mode: "same-origin",
          keepalive: true,
        });
        });
      }
    });
  }
  loadHandler(e) {
    let nowDate = new Date().getTime() + "";
    sessionStorage.setItem("_load_Time", nowDate);
  }  

方法二

在vue /angular单页面中:
    window.onbeforeunload = function () {
      this.beginTime = new Date().getTime();
    };
    window.onunload = function () {
      this.differTime = new Date().getTime() - this.beginTime;
      if (this.differTime <= 5) {
        // 关闭
        window.localStorage.setItem("isPagesClose", this.differTime);
        const params = [
          `caseId=${this._currentChatId}`,
          `customerId=${this._customerId}`,
        ].join("&");
        let promise = fetch(`/api/session-unconnected?${params}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            Authorization: `Bearer ${sessionStorage.getItem("token")}`,
          },
          mode: "same-origin",
          keepalive: true,
        });
        // 大概率成功,会将请求得到的值存入到localStroge中
        window.localStorage.setItem("success", JSON.stringify(promise));
      } else {
        // 刷新
        window.localStorage.setItem("isPagesLoad", this.differTime);
      }
    };
    window.onload = function () {
      console.log("onload");
    };
  }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值