关于前端:Vue中判断是刷新页面还是关闭页面操作

最近在做我的项目是遇到一个需要,如果是第一次进入页面敞开页面下次再进来就不弹出疏导层,如果第一次进入页面之后刷新页面疏导层始终存在,因而就想着判断咱们以后的操作是刷新页面还是敞开页面,所有有了上面操作

在vue页面中应用localStorage存储定义的标识,在敞开浏览器的时候删除标识,刷新浏览器不做操作

在须要进行操作的vue页面中增加以下代码

mounted() {
    let beginTime = 0; //开始工夫
    let differTime = 0; //时间差
    window.onunload = function() {
      differTime = new Date().getTime() - beginTime;
      if (differTime <= 5) {
        localStorage.removeItem('aitoken');
        localStorage.removeItem('userInfo');
        localStorage.removeItem('isLogin');
        console.log("这是敞开");
      } else {
        console.log("这是刷新");
      }
    };
    window.onbeforeunload = function() {
      beginTime = new Date().getTime();
    };
}

解析刷新页面和敞开页面执行的办法:unbeforeunloadonunload

  • unbeforeunload()事件执行的程序在onunload()事件之前产生。(因为,unbeforeunload()是在页面刷新之前触发的事件,而onubload()是在页面敞开之后才会触发的)。
  • unbeforeunload()事件能够禁止onunload()事件的触发。
  • onunload()事件是无奈阻止页面敞开的。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理