JavaScript 區分頁面刷新、瀏覽器關閉和新選項卡

Question

我試圖區分頁面刷新、瀏覽器關閉和新標簽事件。

所以，我想對頁面關閉 V/s 頁面刷新/新選項卡進行一些處理

我在使用 sessionStorage 時遇到了以下解決方法。 然而 sessionStorage 的問題是它會被重置或即使在新標簽中打開鏈接也不會被讀取。 但我希望頁面刷新/新選項卡以相同的方式對頁面進行 V/s 刷新。

if (sessionStorage.getItem('reloaded') != null) {
    console.log('page was reloaded');
} else {
    console.log('page was not reloaded');
}

sessionStorage.setItem('reloaded', 'yes');

Answer 1

您必須結合使用sessionStorage和localStorage來保存數據，並依靠beforeunload事件來處理數據刪除。

事情是beforeunload在選項卡/窗口關閉和頁面刷新時觸發，所以我們必須解決這個問題。

localStorage將處理跨選項卡和窗口的持久性， sessionStorage將在頁面刷新時同步數據。

const readFromStorage = (storageKey) => {
    const localStorageItem = localStorage.getItem(storageKey);
    const sessionStorageItem = sessionStorage.getItem(storageKey);

    // You can optimize this by doing more checks but you get the idea
    const itemValue = localStorageItem ?? sessionStorageItem;

    if (localStorageItem !== sessionStorageItem) {
        writeToStorage(storageKey, itemValue);
    }

    return itemValue;
};

const writeToStorage = (storageKey, value) => {
    localStorage.setItem(storageKey, value);
    sessionStorage.setItem(storageKey, value);
};

事件處理程序：

window.addEventListener('beforeunload', (e) => {
    localStorage.removeItem(STORAGE_KEY);
});

用法：

const STORAGE_KEY = '<storage_key>';

const item = readFromStorage(STORAGE_KEY);

如果item為null - 選項卡/窗口已關閉。 否則，數據將在刷新和新選項卡/窗口中保持不變。