監聽瀏覽器刷新及關閉

需求背景： 爲保證‘高度安全性’，用戶每次退出頁面或瀏覽器都要清除登錄信息，每次進入系統都要從新登錄（每次登錄還要手機驗證碼等亂七八糟的驗證信息，，，求用戶的內心陰影面積），可是刷新頁面不能夠清除登錄信息。
解決思路： javascript 對於瀏覽器的關閉和刷新會觸發兩個事件 onbeforeunload()和 onunload()，問題在於如何區分用戶是想刷新仍是退出（此時應該將用戶催眠，而後得到用戶的思想，預判用戶走位及操做。。。），本文主要記錄這兩個方法的區別，設備兼容性及如何催眠用戶（開玩笑的），是如何區分刷新和退出瀏覽器

onbeforeunload()和onunload()

onbeforeunload 和 onunload 都是在頁面刷新或退出時觸發的事件

用法：

事件	用法
onunload	window.onunload=function(){SomeJavaScriptCode};
onbeforeunload	window.onbeforeunload=function(){SomeJavaScriptCode};

區別：

1. unbeforeunload()是在頁面刷新或關閉以前觸發的事件，而onubload()是在頁面刷新或關閉以後纔會觸發的。
2. unbeforeunload()事件執行的順序在onunload()事件以前發生。
3. unbeforeunload()事件能夠禁止onunload()事件的觸發。
4. onunload()事件是沒法阻止頁面關閉的。

兼容性（pc）：

事件	Chrome	Firefox	IE	Opera	Safari
onunload	yes	yes	yes	yes	yes
onbeforeunload	1	1	4	12	3

注意：onbeforeunoad 在移動端基本都不兼容，onunload則兼容大部分主流移動端瀏覽器

參考文獻：
MDN: window.onbeforeunload
MDN: window.onunload

區分刷新和退出

在瀏覽器關閉前是沒法判斷用戶是刷新仍是退出，因此咱們在用戶再次打開的時候來判斷用戶是否刷新

解決思路：

1. 用戶關閉瀏覽器時，記錄當前時間，並存於瀏覽器緩存中
2. 用戶再次打開頁面時，獲取上次退出的時間，並於當前時間進行比較，若小於5s則表示用戶執行的是刷新操做，若大於5s則斷定爲退出

注意： 5s並不是固定，要根據實際狀況調整

上代碼：

// 進入頁面執行
// 記錄當前時間並轉成時間戳
const now = new Date().getTime();
// 從緩存中獲取用戶上次退出的時間戳
const leaveTime = parseInt(localStorage.getItem('leaveTime'), 10);
// 判斷是否爲刷新，兩次間隔在5s內斷定爲刷新操做
const refresh = (now - leaveTime) <= 5000;
// 測試alert
alert(refresh ? '刷新' : '從新登錄');

// 退出當前頁面執行
window.onunload = function(e){ // ios 不支持 window.onbeforeunload()
  // 將退出時間存於localstorage中
  localStorage.setItem('leaveTime', new Date().getTime());
}