JavaScript 区分页面刷新、浏览器关闭和新选项卡

Question

我正在尝试区分页面刷新、浏览器关闭和新标签事件。

所以，我想在页面关闭 V/s 页面刷新/新标签时进行一些处理

我遇到了以下使用 sessionStorage 的解决方法。但是 sessionStorage 的问题是它被重置或即使在新选项卡中打开链接时也不会被读取。但我希望页面刷新/新选项卡的行为方式与页面刷新方式相同。

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 - 选项卡/窗口已关闭。否则，数据将在刷新和新选项卡/窗口中保持不变。