瀏覽器關閉的時候我們需要做一些事情（比如調用退出接口或者刪除localStorage等等）

一、如何判斷瀏覽器時關閉了？

　　巨坑！監聽瀏覽器窗口關閉onbeforeunload不起作用（脫坑了啊！！）

 

　　因業務需要，特寫方法監聽瀏覽器關閉，然后去do something

　　先聲明我沒在忽悠，看完能實現這個需求的！！

　　網上大部分推薦方法如下：

　　window.onbeforeunload= function (e) {
　　　　e = e || window.event;
　　　　if (e) {
　　　　　　e.returnValue = '關閉提示';
　　　　}

　　　　// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
　　　　return '關閉提示';
　　};
　　是不是各位測試感覺都沒有效果？？？

　　來講幾個點：

　　1、在IE中這個事件你只要去關閉窗口就觸發。

　　2、谷歌、火狐等在F12調試模式中也會起效

　　3、谷歌、火狐、QQ等瀏覽器中被優化了，需要用戶在頁面有過任何操作才會出現提示！（坑）。

　　不相信的運行下面代碼

　　window.onbeforeunload= function (e) {
　　　　while(true){
　　　　　　console.log('關注Jone，攜手學習Python從入門到入獄');
　　　　}

　　};
　　別生氣，你的需求實現了啊！

　　注意：alert寫在里面是不起效的！！

　　總結：你去寫你的事件寫到return之前，什么http啊什么console.log都沒問題，最好直接在里面調用方法去寫業務，不要寫一大坨代碼在這里

　　附我的代碼

　　//Vue中寫在mounted里
　　mounted() {
　　　　window.onbeforeunload= (e)=>{
　　　　　　e = e || window.event;
　　　　　　if (e) {
　　　　　　　　e.returnValue = '關閉提示';
　　　　　　}

　　　　　　this.toCloseFun()//調用自己的方法

　　　　　　// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
　　　　　　return '關閉提示';
　　　　};
　　},

很抱歉以上雖然說明了關閉瀏覽器時能執行上述方法，但是，你在刷新瀏覽器的時候同樣會執行上述代碼，而我現在的需求是刷新瀏覽器的時候不執行，關閉瀏覽器的時候執行。
 
那么下面教大家如何判斷瀏覽器是刷新還是直接關閉：

二、vue手動判斷瀏覽器關閉

　　當瀏覽器關閉時，我們可以清除localstorage及cookie
　　只關閉，刷新無效

　　在App.js里面寫入

　　

methods: {
     beforeunloadHandler(){
        this._beforeUnload_time=new Date().getTime()
    },
    unloadHandler(e){
      console.log(e)
        this._gap_time=new Date().getTime()-this._beforeUnload_time
        debugger
        //判斷是窗口關閉還是刷新
        if(this._gap_time<=5){
          //如果是登錄狀態，關閉窗口前，移除用戶
               localStorage.removeItem('token')
        }
    },
},

　　

mounted() {
      window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
      window.addEventListener('unload', e => this.unloadHandler(e))
},

　　

 destroyed() {
      window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
      window.removeEventListener('unload', e => this.unloadHandler(e))
},