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

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 
 }