vue项目怎么判断网页关闭和刷新
根据时间差来判断知识点浏览器关闭执行的是 beforeunload , unload 这两个事件;而浏览器刷新执行的是beforeunload, unload, load 三个事件;思路虽然刷新与关闭都会走onbeforeunload与onunload,但可能因为刷新在加载新页面前内部机制还需要做一些准备工作,所以刷新事件在执行到onunload事件时,用的时间会比关闭事件时间长。所以,通过时间差
·
根据时间差来判断
使用场景:如果用户直接关闭调页面,那么此时,就应该清除本地信息,将页面跳转到登录页
知识点
浏览器关闭执行的是 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();
};
}
更多推荐
已为社区贡献9条内容
所有评论(0)