精准控制页面退出行为：区分浏览器关闭与页面刷新以管理 localStorage

onbeforeunload / onunload 的局限性

在web开发中，我们经常需要处理用户离开页面的事件，例如在用户关闭浏览器标签页或窗口时执行一些清理操作。window.onunload 和 window.onbeforeunload 是javascript中用于捕获这些事件的两个常用api。然而，它们的一个主要挑战在于，无论是用户关闭页面、刷新页面，还是通过前进/后退按钮导航，这两个事件都会被触发。

例如，如果我们的目标是在所有相关标签页关闭时清除 localStorage 中的数据，但当用户仅仅刷新页面时也触发了清除操作，这就会导致数据丢失和不佳的用户体验。特别是在需要跨多个标签页维护状态的场景下，这种不加区分的清理行为会带来严重问题。

多标签页 localStorage 管理挑战

考虑一个场景：一个Web应用需要跟踪所有活跃的标签页。当用户打开一个新标签页时，应用会为其分配一个唯一的ID，并将其记录在 sessionStorage 中（确保每个标签页有独立的ID），同时将所有活跃标签页的ID列表存储在 localStorage 中。这样，localStorage 中的列表就能反映当前所有打开的、属于该应用的标签页。

当一个标签页关闭时，我们希望将其ID从 localStorage 的列表中移除。只有当这个列表变为空时（意味着所有相关的标签页都已关闭），我们才应该清空整个 localStorage。如果 onunload 事件在页面刷新时也触发了清理逻辑，那么即使还有其他标签页活跃，localStorage 也可能被错误地清空。

解决方案：利用 Performance Navigation Timing API

为了解决 onbeforeunload / onunload 的局限性，我们可以利用 Performance Navigation Timing API 来区分页面导航的类型。Performance API 提供了 performance.getEntriesByType("navigation") 方法，它会返回一个包含当前页面导航信息的数组。这个数组中的每个条目（PerformanceNavigationTiming 对象）都有一个 type 属性，它能精确地描述导航的类型：

• 'navigate': 首次访问或通过链接导航。
• 'reload': 页面刷新。
• 'back_forward': 通过浏览器的前进/后退按钮导航。
• 'prerender': 页面被预渲染（较少见）。

通过检查 type 属性，我们就可以判断当前页面是否正在刷新。核心思路是：只有当 type 不为 'reload' 时，才执行我们希望在页面关闭时触发的清理逻辑。

实现步骤与代码示例

下面我们将展示如何结合 window.onload 和 window.onbeforeunload，并利用 Performance API 来实现精确的 localStorage 管理。

牛面

牛面AI面试，大厂级面试特训平台

147

查看详情

1. 初始化：标签页注册 (window.onload)

在页面加载时，每个标签页都会注册自己的唯一ID到 sessionStorage，并将其添加到 localStorage 中维护的活跃标签页列表中。

window.onload = () => {
    var tabID = sessionStorage.getItem("tab_id");
    if (tabID === null) {
        // 生成一个唯一的标签页ID
        var hash = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
        sessionStorage.setItem("tab_id", hash);

        // 获取或初始化所有活跃标签页列表
        var allTabs = localStorage.getItem("all_tabs");
        if (allTabs === null || allTabs === '') {
            allTabs = [];
        } else {
            allTabs = allTabs.split(',');
        }

        // 将当前标签页ID添加到列表中
        allTabs.push(hash);
        localStorage.setItem("all_tabs", allTabs.toString());
    }
};

解释：

• sessionStorage.getItem("tab_id") 检查当前标签页是否已有ID。sessionStorage 确保每个标签页实例都有独立的ID。
• 如果ID不存在，生成一个随机哈希作为 tabID，并存储到 sessionStorage。
• localStorage.getItem("all_tabs") 获取所有活跃标签页的ID列表。这个列表在所有标签页之间共享。
• 将当前 tabID 添加到 allTabs 数组中，并更新 localStorage。

2. 区分刷新与关闭 (window.onbeforeunload)

在 onbeforeunload 事件中，我们将使用 Performance API 来判断导航类型，并据此决定是否执行 localStorage 的清理操作。

var navigationType; // 用于存储导航类型

function getNavigationType() {
    var perfEntries = performance.getEntriesByType("navigation");
    if (perfEntries.length > 0) {
        navigationType = perfEntries[0].type;
    } else {
        // 某些情况下可能无法获取，提供一个默认值或备用逻辑
        navigationType = 'unknown'; 
    }
}

window.onbeforeunload = () => {
    getNavigationType(); // 在事件触发时获取导航类型
    console.log("Navigation Type:", navigationType);

    // 只有当导航类型不是 'reload' 时才执行清理逻辑
    if (navigationType !== 'reload') {
        var tabID = sessionStorage.getItem("tab_id");
        var allTabs = localStorage.getItem("all_tabs");

        if (allTabs) { // 确保 allTabs 不为 null 或 undefined
            var locItemsArr = allTabs.split(',');

            // 从列表中移除当前标签页ID
            var ind = locItemsArr.indexOf(tabID);
            if (ind > -1) {
                locItemsArr.splice(ind, 1);
            }
            localStorage.setItem("all_tabs", locItemsArr.toString());

            // 如果 allTabs 列表为空，则清空 localStorage
            if (localStorage.getItem("all_tabs") === "" || localStorage.getItem("all_tabs") === null) {
                console.log('Clearing localStorage because all tabs are closed.');
                localStorage.clear();
            }
        } else {
            // 如果 allTabs 已经为空，也清空 localStorage (以防万一)
            console.log('localStorage.all_tabs is already empty, clearing localStorage.');
            localStorage.clear();
        }
    }
};

解释：

• getNavigationType() 函数负责调用 performance.getEntriesByType("navigation") 并提取导航类型。我们将导航类型存储在 navigationType 变量中，以便在 onbeforeunload 回调中使用。
• window.onbeforeunload 事件会在页面即将卸载时触发。
• 核心判断 if (navigationType !== 'reload') 确保了只有在用户关闭标签页、导航到其他页面（非刷新）或使用前进/后退按钮时，清理逻辑才会被执行。
• 清理逻辑：
  • 获取当前标签页的 tabID 和 localStorage 中的 all_tabs 列表。
  • 将当前 tabID 从 all_tabs 列表中移除。
  • 更新 localStorage 中的 all_tabs。
  • 如果更新后的 all_tabs 列表为空，说明当前是最后一个关闭的标签页，此时清空整个 localStorage。

注意事项与最佳实践

1. onbeforeunload 与用户体验： onbeforeunload 事件通常用于在用户离开页面前提供一个确认提示。如果只是执行后台清理逻辑，通常不需要返回一个字符串来触发确认框。现代浏览器对 onbeforeunload 的行为有严格限制，有时可能不会完全按照预期执行，尤其是在没有用户交互的情况下。
2. 兼容性： Performance Navigation Timing API 在现代浏览器中支持良好（包括Chrome, Firefox, Safari, Edge），但对于非常旧的浏览器版本，可能需要提供降级方案。
3. 稳定性与测试： 尽管 Performance API 提供了一个可靠的机制，但浏览器的行为可能因版本、操作系统和用户设置而异。在实际应用中，务必进行充分的测试，以确保在各种场景下（如快速关闭多个标签页、浏览器崩溃等）都能稳定运行。
4. 数据持久性： 如果你的应用对数据的持久性要求极高，并且 localStorage 清理逻辑至关重要，建议考虑更健壮的跨标签页通信和数据同步方案，例如使用 IndexedDB 结合 Broadcast Channel API 或 Web Workers。
5. 错误处理： 在处理 localStorage 数据时，应增加对数据格式的校验和错误处理，以防止因数据损坏导致的问题。例如，all_tabs 可能不是预期的逗号分隔字符串。

总结

通过结合 window.onbeforeunload 事件和 Performance Navigation Timing API，我们可以有效地在Web应用中区分页面关闭和页面刷新行为。这种方法使得精细化的 localStorage 管理成为可能，例如只在所有相关标签页关闭时才清除数据，从而避免了不必要的误操作，提升了应用的数据完整性和用户体验。在实现时，请务必考虑浏览器兼容性、进行充分测试，并根据应用的具体需求选择最合适的策略。

以上就是精准控制页面退出行为：区分浏览器关闭与页面刷新以管理 localStorage的详细内容，更多请关注php中文网其它相关文章！