区分页面刷新与关闭，精准控制onbeforeunload事件触发逻辑

// 在页面加载时，为当前标签页分配一个唯一ID并添加到localStorage中
window.onload = () => {
    let tabID = sessionStorage.getItem("tab_id");
    if (tabID === null) {
        tabID = Math.random().toString(36).substring(2, 15); // 生成一个简短的随机ID
        sessionStorage.setItem("tab_id", tabID);

        let allTabs = localStorage.getItem("all_tabs");
        let allTabsArr = (allTabs == null || allTabs === '') ? [] : allTabs.split(',');

        allTabsArr.push(tabID);
        localStorage.setItem("all_tabs", allTabsArr.toString());
    }
};

// 在页面卸载时，尝试从localStorage中移除当前标签页ID
// 这里的关键问题是，它在刷新时也会触发
window.onunload = () => {
    const tabID = sessionStorage.getItem("tab_id");
    let allTabs = localStorage.getItem("all_tabs");
    let locItemsArr = allTabs ? allTabs.split(',') : [];

    const ind = locItemsArr.indexOf(tabID);
    if (ind > -1) {
        locItemsArr.splice(ind, 1);
        localStorage.setItem("all_tabs", locItemsArr.toString());
    }

    // 如果所有标签页都已关闭，则清除localStorage
    if (localStorage.getItem("all_tabs") === "") {
        console.log('清除所有localStorage');
        localStorage.clear();
    }
};

// 全局变量用于存储导航性能数据，确保onbeforeunload可以访问到
let navigationPerformanceEntry;

/**
 * 获取并存储当前页面的导航性能数据。
 * 在页面加载时调用，确保navigationPerformanceEntry在onbeforeunload前被赋值。
 */
function getNavigationTimingData() {
    const perfEntries = performance.getEntriesByType("navigation");
    if (perfEntries.length > 0) {
        navigationPerformanceEntry = perfEntries[0];
        console.log("导航类型:", navigationPerformanceEntry.type);
    }
}

// 页面加载时执行的逻辑
window.onload = () => {
    getNavigationTimingData(); // 获取导航类型

    let tabID = sessionStorage.getItem("tab_id");
    if (tabID === null) {
        // 如果当前标签页没有ID，则生成一个
        tabID = Math.random().toString(36).substring(2, 15); // 生成一个简短的随机ID
        sessionStorage.setItem("tab_id", tabID);

        let allTabs = localStorage.getItem("all_tabs");
        let allTabsArr = (allTabs == null || allTabs === '') ? [] : allTabs.split(',');

        allTabsArr.push(tabID);
        localStorage.setItem("all_tabs", allTabsArr.toString());
        console.log(`新标签页 ${tabID} 已注册。当前活跃标签页: ${allTabsArr}`);
    } else {
        console.log(`标签页 ${tabID} 已存在。`);
    }
};

// 页面即将卸载时执行的逻辑 (包括刷新和关闭)
window.onbeforeunload = () => {
    // 确保navigationPerformanceEntry是最新的，或者在onbeforeunload中再次获取
    // 重新获取可以确保在某些浏览器行为下数据的准确性
    const perfEntries = performance.getEntriesByType("navigation");
    const currentNavType = perfEntries.length > 0 ? perfEntries[0].type : 'unknown';

    console.log("onbeforeunload 触发，导航类型:", currentNavType);

    // 只有当导航类型不是 'reload' 时才执行清理逻辑
    if (currentNavType !== 'reload') {
        const tabID = sessionStorage.getItem("tab_id");
        let allTabs = localStorage.getItem("all_tabs");
        let locItemsArr = allTabs ? allTabs.split(',') : [];

        const ind = locItemsArr.indexOf(tabID);
        if (ind > -1) {
            locItemsArr.splice(ind, 1);
            localStorage.setItem("all_tabs", locItemsArr.toString());
            console.log(`标签页 ${tabID} 已移除。剩余活跃标签页: ${locItemsArr}`);
        }

        // 如果所有标签页都已关闭，则清除localStorage
        if (localStorage.getItem("all_tabs") === "" || locItemsArr.length === 0) {
            console.log('所有活跃标签页已关闭，清除所有localStorage。');
            localStorage.clear();
        }
    } else {
        console.log('页面正在刷新，跳过localStorage清理。');
    }
};