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 管理。
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。
注意事项与最佳实践
- onbeforeunload 与用户体验： onbeforeunload 事件通常用于在用户离开页面前提供一个确认提示。如果只是执行后台清理逻辑，通常不需要返回一个字符串来触发确认框。现代浏览器对 onbeforeunload 的行为有严格限制，有时可能不会完全按照预期执行，尤其是在没有用户交互的情况下。
- 兼容性： Performance Navigation Timing API 在现代浏览器中支持良好（包括Chrome, Firefox, Safari, Edge），但对于非常旧的浏览器版本，可能需要提供降级方案。
- 稳定性与测试： 尽管 Performance API 提供了一个可靠的机制，但浏览器的行为可能因版本、操作系统和用户设置而异。在实际应用中，务必进行充分的测试，以确保在各种场景下（如快速关闭多个标签页、浏览器崩溃等）都能稳定运行。
- 数据持久性： 如果你的应用对数据的持久性要求极高，并且 localStorage 清理逻辑至关重要，建议考虑更健壮的跨标签页通信和数据同步方案，例如使用 IndexedDB 结合 Broadcast Channel API 或 Web Workers。
- 错误处理： 在处理 localStorage 数据时，应增加对数据格式的校验和错误处理，以防止因数据损坏导致的问题。例如，all_tabs 可能不是预期的逗号分隔字符串。
总结
通过结合 window.onbeforeunload 事件和 Performance Navigation Timing API，我们可以有效地在Web应用中区分页面关闭和页面刷新行为。这种方法使得精细化的 localStorage 管理成为可能，例如只在所有相关标签页关闭时才清除数据，从而避免了不必要的误操作，提升了应用的数据完整性和用户体验。在实现时，请务必考虑浏览器兼容性、进行充分测试，并根据应用的具体需求选择最合适的策略。
