标签：onunload vue 浏览器 时间差 毫秒 关闭 刷新 网页

根据时间差来判断

知识点

浏览器关闭执行的是 beforeunload ， unload 这两个事件；
而浏览器刷新执行的是beforeunload， unload， load 三个事件；

思路

虽然刷新与关闭都会走onbeforeunload与onunload，但可能因为刷新在加载新页面前内部机制还需要做一些准备工作，所以刷新事件在执行到onunload事件时，用的时间会比关闭事件时间长。

所以，通过时间差来判断浏览器是刷新还是关闭，浏览器执行beforeunload的时候给一个开始时间，执行unload的时候给一个结束时间；判断一下时间差；我设置的是5毫秒来区分浏览器的关闭和刷新，具体的时间最好还是亲自测一下；

首先在App.vue里面 定义mounted 钩子函数：

 mounted(){
    /**
     *判断浏览器窗口是刷新或者关闭操作
     * 无论任何浏览器不管是刷新或者是关闭都会执行下面两个方法 onbiforeunload  onunload
     * 根据时间差来实现
     * 在点击刷新或者关闭时开始计时记录下这一刻的时间戳
     * 因为刷新和关闭 在执行onunload方法时的时间不一样，一般情况下经过测试
     * 关闭时时间差不大于3毫秒
     * 刷新时即使只有一个简单的helloworld页面都不少于10毫秒
     * 而一般网站网页内容更多，时间差达到了100多毫秒
     *
     *
     * 下面方法的缺点是不管你开了多少窗口，都会在关闭一个窗口时清空所有localStorage缓存
     * 造成所有页面都需要重新登录，其实这也是针对项目而言的，目前本项目就不认为这是缺点
     * 而能更好的保护用户信息
     **/
    let beginTime = 0;//开始时间
    let differTime = 0;//时间差
    window.onunload = function (){
      differTime = new Date().getTime() - beginTime;
      if(differTime <= 5) localStorage.clear();
    };
    window.onbeforeunload = function (){
      beginTime = new Date().getTime();
    };
  }

标签：onunload,vue,浏览器,时间差,毫秒,关闭,刷新,网页
来源： https://blog.csdn.net/weixin_49696014/article/details/113179184

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。