如何区分页面关闭与刷新，仅在关闭时清除localStorage？

我希望关闭浏览器后清除localStorage，因此用sessionStorage管理所有活跃标签页，当前App.js代码如下：

window.onload = () => {
    var tabID = sessionStorage.getItem("tab_id");
    if (tabID === null) {
        var hash = Math.random(10**5).toString(36)
        sessionStorage.setItem("tab_id", hash);
        var allTabs = localStorage.getItem("all_tabs");
        if (allTabs ==null || allTabs==''){
            console.log(1)
            allTabs=[]
        }
        else{
            console.log(1, allTabs)
            allTabs = allTabs.split(',');
        }
        console.log(allTabs)
        allTabs.push(hash)
        console.log(hash, 'local', allTabs)
        localStorage.setItem("all_tabs", allTabs);
    }
}

window.onunload  = () => {
    var tabID = sessionStorage.getItem("tab_id");
    var allTabs = localStorage.getItem("all_tabs");
    var locItemsArr = allTabs.split(',');

    var ind = locItemsArr.indexOf(tabID)
    locItemsArr.splice(ind,1)
    localStorage.setItem("all_tabs", locItemsArr.toString());

    if (localStorage.getItem("all_tabs") == "" ) {
        console.log('clear')
        localStorage.clear()
    }
}

但onunload事件在页面刷新时也会触发，请问有没有办法区分页面是关闭还是刷新，仅在关闭时清除localStorage？

方案1：定时器延迟+页面加载取消 #

核心逻辑：页面即将卸载时启动延迟定时器，若为刷新操作，页面会快速重新加载，此时在load事件中取消定时器；若为关闭操作，定时器会执行清理逻辑。

修改后的代码：

let cleanupTimer;

window.onload = () => {
    // 页面加载时取消未执行的清理定时器
    if (cleanupTimer) {
        clearTimeout(cleanupTimer);
        cleanupTimer = null;
    }

    var tabID = sessionStorage.getItem("tab_id");
    if (tabID === null) {
        // 生成更稳定的唯一标识
        var hash = Math.random().toString(36).substring(2, 8);
        sessionStorage.setItem("tab_id", hash);
        var allTabs = localStorage.getItem("all_tabs");
        allTabs = allTabs ? allTabs.split(',') : [];
        allTabs.push(hash);
        localStorage.setItem("all_tabs", allTabs.join(','));
    }
}

window.addEventListener('beforeunload', () => {
    // 设置300ms延迟，覆盖刷新时页面重启的时间
    cleanupTimer = setTimeout(() => {
        const tabID = sessionStorage.getItem("tab_id");
        if (!tabID) return;

        let allTabs = localStorage.getItem("all_tabs");
        if (!allTabs) return;

        allTabs = allTabs.split(',');
        const ind = allTabs.indexOf(tabID);
        if (ind !== -1) {
            allTabs.splice(ind, 1);
            localStorage.setItem("all_tabs", allTabs.join(','));
        }

        if (!localStorage.getItem("all_tabs")) {
            localStorage.clear();
        }
    }, 300);
});

注：300ms为经验值，可根据实际场景调整延迟时长。

方案2：利用pagehide事件的persisted属性 #

现代浏览器中，pagehide事件的event.persisted属性可判断页面是否会被缓存：切换标签、后退操作时该值为true，关闭或刷新时为false，结合此属性可过滤无需清理的场景。

修改后的卸载监听代码：

window.addEventListener('pagehide', (event) => {
    // 页面会被缓存时，不执行清理
    if (event.persisted) return;

    const tabID = sessionStorage.getItem("tab_id");
    if (!tabID) return;

    let allTabs = localStorage.getItem("all_tabs");
    if (!allTabs) return;

    allTabs = allTabs.split(',');
    const ind = allTabs.indexOf(tabID);
    if (ind !== -1) {
        allTabs.splice(ind, 1);
        localStorage.setItem("all_tabs", allTabs.join(','));
    }

    if (!localStorage.getItem("all_tabs")) {
        localStorage.clear();
    }
});

注：部分旧浏览器可能存在兼容性问题，建议测试后使用。

内容的提问来源于stack exchange，提问作者Egoinc