瀏覽器關閉/標簽頁全部關閉，退出登錄狀態

實現效果：1、瀏覽器關閉/標簽頁全部關閉/點擊退出按鈕，退出登錄狀態。2、瀏覽器同時只能登錄一個賬號，登錄一次后，其他標簽頁打開全部進入首頁。

 分析：

1. 在登錄成功后保存賬號相關信息。
2. 打開標簽頁瀏覽器執行onload事件方法，刷新頁面執行onbeforeunload ——》onload事件方法，關閉瀏覽器和關閉標簽頁執行onbeforeunload 事件方法。
3. 難點：瀏覽器並未提供單獨關閉瀏覽器和關閉標簽頁的方法。
4. 解決方案：利用onbeforeunload 和onload事件的執行順序，在onload事件方法里清除賬號信息，退出登錄。

 

運行分析：

1)：首次打開頁面執行onload方法，如果第一次打開，localTime,sesTime,numbers都沒有值，執行第一個If語句，清除localStorage和sessionStorage的值，重新給localTime,sesTime賦值，numbers++,此時numbers=0。

2)：刷新頁面先執行onbeforeunload 方法，當前localTime,sesTime有值且相等，numbers--，此時numbers=0;然后再執行onload方法。此時localTime,sesTime有值，numbers++,此時numbers=1;

3)：再次打開新的標簽頁，執行onload方法，此時localTime有值並且numbers=1，執行第二個if語句，給sesTime賦值。numbers++,此時numbers=2;

 

 代碼：

//刷新頁面時，首先進入onbeforeunload 方法

window.onbeforeunload = () => {

　　let numbers = window.localStorage.getItem('numbers');

　　const sesTime = window.sessionStorage.getItem('sesTime');

　　const localTime = window.localStorage.getItem('localTime');

　　//當localTime 沒有值，並且sesTime === localTime，減去當前頁。

　　if (localTime != 'NaN' && localTime != null && sesTime === localTime) {

　　　　numbers = parseInt(numbers) - 1;

　　　　window.localStorage.setItem('numbers', numbers)

　　}

};

 

window.onload = () => {

　　let time = '';

　　let numbers = window.localStorage.getItem('numbers');//計算打開的標簽頁數量

　　const sesTime = window.sessionStorage.getItem('sesTime');

　　const localTime = window.localStorage.getItem('localTime');//首次登錄的時間

 

//當numbers無值或者小於0時，為numbers 賦值0

if (numbers == 'NaN' || numbers === null || parseInt(numbers) < 0) {

　　numbers = 0;

}

//sesTime || localTime 沒有值，並且numbers為0時，清除localStorage里的登錄狀態，退出到登錄頁面

if ((sesTime === null || sesTime === 'NaN' || localTime === null ||

localTime === 'NaN') && parseInt(numbers) === 0) {

localStorage.clear();

sessionStorage.clear();

//為localTime和sesTime賦值，記錄第一個標簽頁的時間

time = new Date().getTime();

window.sessionStorage.setItem('sesTime', time);

window.localStorage.setItem('localTime', time);

router.push('/login');

}

//當time ，localTime 有值，並且sesTime != localTime時，為sesTime賦值

if (!time && localTime != 'NaN' && localTime != null && sesTime != localTime) {

　　window.sessionStorage.setItem('sesTime', localTime);

}

//最后保存當前是第幾個標簽頁

numbers = parseInt(numbers) + 1;

window.localStorage.setItem('numbers', numbers);

};