1. 浏览器事件：

浏览器的刷新和关闭

onbeforeunload：

在页面刷新和关闭的时候触发事件，表示正要去服务器读取新的页面时调用，此时还没开始读取。
例如: 刷新浏览器的时候tab会切换到默认值,而浏览器缓存却还是老样子,这样就可以使用浏览器恢复默认

//检测浏览器刷新
window.onbeforeunload = function()
{   //设置默认sessionStorage值sessionStorage.removeItem('tab','tab1')
}

onunload：

则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
onload：

当资源已加载时被触发。
注: onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。
那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。

componentWillMount () {// 拦截判断是否离开当前页面window.addEventListener('beforeunload', this.beforeunload);}componentWillUnmount () {// 销毁拦截判断是否离开当前页面window.removeEventListener('beforeunload', this.beforeunload);}beforeunload (e) {let confirmationMessage = '你确定离开此页面吗?';(e || window.event).returnValue = confirmationMessage;return confirmationMessage;}

2. vuex状态管理刷新丢失：

vuex中的变量是响应式的，而sessionStorage不是，改变vuex中的状态，
组件会检测到改变,vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化

ADD_LOGIN_USER (state,data) { //登入，保存状态 sessionStorage.setItem("username", data); //添加到sessionStorage sessionStorage.setItem("isLogin",true); state.username=data,  //同步的改变store中的状态 state.isLogin=true }, SIGN_OUT (state) { //退出，删除状态 sessionStorage.removeItem("username"); //移除sessionStorage sessionStorage.removeItem("isLogin"); state.username=''  //同步的改变story中的状态 state.isLogin=false }

// getter.js
isLogin (state) { if (!state.isLogin) { state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 state.username=sessionStorage.getItem('username'); } return state.username }

浏览器事件 - 监听浏览器刷新问题及解决方案相关推荐

浏览器事件监听的方法
转载于:https://blog.csdn.net/q6678188/article/details/51781478 使用:https://blog.csdn.net/qq_36521848/art ...
js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
由于各浏览器兼容性不同,所以首先要先区分各浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = use ...
jQuery事件监听
monitorEvents() 浏览器事件监听控制或右键单击元素并选择"检查 (Inspect)".在 javaScript 控制台标签中输入: monitorEvents($0 ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
js 监听浏览器刷新还是关闭事件
// $(window).bind('beforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';}); // window.onbeforeunlo ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
javaScript如何监听浏览器关闭事件
转载链接:http://www.cnblogs.com/Tim_Liu/archive/2010/11/09/1872596.html 最近写东西的时候发现需要对浏览器的关闭进行监听, 当用户关闭的时 ...
[轉]Flash/Flex监听浏览器的关闭事件
FROM : http://blog.ityao.com/archives/581 如果想用Flash/Flex监听浏览器的关闭事件, 可以通过JavaScript的window.onbeforeun ...
【webview】微信和PC监听浏览器关闭和刷新(亲测可用)
监听浏览器关闭和刷新前言 PC端微信端前言最近做的项目里有一个新的需求,在不同的浏览器内打开的网页,监听用户的操作,比如关闭浏览器,刷新浏览器等等. 这就涉及到了几个平台:PC端浏览器,移动端 ...
html5中页面关闭事件监听,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...

浏览器事件 - 监听浏览器刷新问题及解决方案

1. 浏览器事件：

浏览器的刷新和关闭

onbeforeunload：

onunload：

onload：

2. vuex状态管理刷新丢失：

浏览器事件 - 监听浏览器刷新问题及解决方案相关推荐

最新文章

热门文章