轉載：區分瀏覽器關閉和重新整理
區分瀏覽器關閉和重新整理
作者：彼得潘北北
連結：https://www.jianshu.com/p/021beaeee526
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
有這樣一個需求，關閉瀏覽器標籤頁之後，再次通過歷史記錄進入時不能直接進入，而是要重新登入之後才能再次進入。大家都知道，只有關閉整個瀏覽器，sessionStorage才會消失，關閉單個標籤頁是不會消失的，除非手動清空。查了一些相關的資料，實現了在關閉頁面時清空sessionStorage，但是又發現了新bug，就是在快速重新整理的情況下，也會清空sessionStorage從而跳到登入頁（很奇葩的一種操作）。。
其實本身瀏覽器關閉和重新整理沒有區別的太開，網上也有很多人問到底怎麼區分，這裡會介紹兩種方案，一種是借鑑網上大神的，主要就是區別了關閉和重新整理，一種是根據後來測試提出來的bug修改的，在快速重新整理的情況下，當然一般人不會瘋狂的點f5，除了測試
先介紹幾個會用到的事件
- onload：頁面載入時觸發
- onbeforeunload: 在即將離開頁面(重新整理或關閉)時觸發
- onunload： 退出頁面時觸發，已經從伺服器上讀到了需要載入的新的頁面，在即將替換掉當前頁面時呼叫
頁面載入時只執行onload
頁面關閉時先執行onbeforeunload，最後onunload
頁面重新整理時先執行onbeforeunload，然後onload，最後onunload。
以下不做相容處理，以chrome為例
方案1：
let _beforeUnload_time = 0, _gap_time = 0;
window.onunload = function (){
_gap_time = new Date().getTime() - _beforeUnload_time;
if(_gap_time <= 5){
// 重新整理時onbeforeunload與onunload的時間差一般都遠大於5
// 瀏覽器關閉
sessionStorage.clear()
} else {
// 瀏覽器重新整理
}
}
window.onbeforeunload = function (){
// 重新整理或關閉頁面都會執行，且先於onunload執行
_beforeUnload_time = new Date().getTime();
};
以上方法完全可以區分重新整理和關閉，但是在你按著f5不動的情況下，onbeforeunload與onunload的時間差也會小於5，從而執行了sessionStorage.clear()，以至跳到了登入頁
方案2：
方案2是在方案1的基礎上改造的，主要是onload事件，適用於你是關閉了頁面還是重新整理了頁面還是通過歷史記錄又進入了頁面
<!DOCTYPE html>
<html lang="en">
<script>
// 關閉頁面清除session
// 判斷關閉頁面之後與再次點開頁面得時間，重新整理操作時間間隔在20ms，>2000ms時說明是非重新整理操作
// 2000ms是通過關閉頁面到點選歷史紀錄進入頁面間隔得大概最短時間
var loadTime = function (){
_load_time = new Date().getTime();
unload_time = localStorage.getItem('unload_time')
localStorage.setItem('_load_time', _load_time);
localStorage.setItem('nowload',_load_time-unload_time);
const gap = _load_time-unload_time;
if(gap>2000){
sessionStorage.clear()
}
};
loadTime()
</script>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>citic-robot-ui</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<script>
let _beforeUnload_time = 0, _gap_time = 0, _load_time=0,unload_time =0 ;
window.onunload = function (){
unload_time = new Date().getTime()
localStorage.setItem('unload_time', unload_time);
}
</script>
</body>
</html>
方案2主要就是通過判斷載入頁面的時間（onload事件）和上次退出頁面（onunload）之間的時間差，在每次退出頁面（重新整理或關閉）時，都往localStorage存值，在載入時取localStorage的值，並且取到載入時的時間與之相減，得到差值，從而判斷使用者是重新整理操作還是關了頁面又通過歷史紀錄進來的操作。方案2將onload事件放到了最上面，之所以這樣做是避免受網路速度影響導致載入的時間或長或短從而無法控制在一個具體的範圍內。