1. 问题背景：onbeforeunload事件的局限性
在web开发中，我们经常需要监听用户离开页面的事件，以便执行一些清理工作，例如保存用户数据、清除本地缓存等。window.onunload和window.onbeforeunload是实现这一目的的常用事件。然而，它们的一个主要挑战是无法区分用户是正在刷新页面（重新加载）还是彻底关闭了浏览器标签页或窗口。这导致的问题是，如果我们的清理逻辑（例如清除localstorage）在页面刷新时也被执行，可能会导致不必要的或错误的数据丢失。
例如，一个常见的场景是，我们希望跟踪所有活跃的浏览器标签页，并在最后一个标签页关闭时清除应用程序的localStorage。如果刷新页面时也触发了清除逻辑，那么即使还有其他标签页是打开的，localStorage也可能被错误地清空。
以下是原始实现中用于跟踪标签页和清理localStorage的示例代码片段：
// 在页面加载时，为当前标签页分配一个唯一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();
}
};上述代码的问题在于，window.onunload在页面刷新时也会执行，导致allTabs列表在不应该被修改时被修改，甚至可能错误地触发localStorage.clear()。
2. 解决方案：利用PerformanceNavigationTiming API
为了解决上述问题，我们需要一种机制来区分页面导航的类型。PerformanceNavigationTiming API提供了一个强大的工具来获取当前文档的导航信息，其中包含一个关键的type属性，可以指示导航是如何发生的。
2.1 PerformanceNavigationTiming API简介
performance.getEntriesByType("navigation")方法返回一个包含PerformanceNavigationTiming对象的数组。这个数组通常只有一个元素，代表了当前页面的导航事件。该对象的type属性可以有以下值：
- "navigate": 用户通过点击链接、输入URL等方式进行的新导航。
- "reload": 用户刷新页面。
- "back_forward": 用户通过浏览器历史记录（前进/后退）导航。
- "prerender": 页面被预渲染（较少见）。
通过检查type属性，我们可以准确判断用户是刷新了页面还是进行了其他类型的导航（包括关闭前的最后一次导航）。
2.2 实施区分逻辑
我们将修改window.onbeforeunload事件处理函数，在其中加入对PerformanceNavigationTiming.type的检查。如果type是'reload'，则表示用户正在刷新页面，此时我们不执行清理逻辑。只有当type不是'reload'时，才执行清除localStorage等操作。
注意事项：
- window.onbeforeunload事件比window.onunload事件更早触发，并且允许我们取消页面卸载（通过返回一个字符串）。对于需要执行清理逻辑的场景，onbeforeunload通常是更合适的选择，因为它提供了更多的控制权和更可靠的执行时机。
- performance.getEntriesByType("navigation")在某些旧版浏览器中可能不支持，但现代浏览器普遍支持。
3. 完整实现方案
以下是整合了PerformanceNavigationTiming API的改进方案：
// 全局变量用于存储导航性能数据，确保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清理。');
}
};4. 代码解析与注意事项
- getNavigationTimingData() 函数: 这个辅助函数负责获取当前的导航性能条目。在window.onload中调用它，确保在页面加载完成时就获取到导航类型。尽管在onbeforeunload中再次获取更健壮，但了解其用途很重要。
-
window.onload:
- 为每个新打开的标签页生成一个唯一的tabID并存储在sessionStorage中。sessionStorage的特性是数据只在当前标签页的生命周期内有效，标签页关闭后数据即被清除。
- 将tabID添加到localStorage中维护的all_tabs列表中。localStorage的数据在浏览器关闭后仍然保留，因此可以用于跨标签页和跨会话跟踪。
-
window.onbeforeunload:
- 核心逻辑: 在事件触发时，我们再次调用performance.getEntriesByType("navigation")来获取最新的导航类型。这是最可靠的方式，以防onload时获取的数据因某些浏览器行为而变得不准确。
- 条件判断: if (currentNavType !== 'reload')是关键。只有当导航类型不是“刷新”时，才执行后续的清理逻辑。
-
清理逻辑:
- 从localStorage的all_tabs列表中移除当前标签页的tabID。
- 检查all_tabs列表是否为空。如果为空（意味着所有跟踪的标签页都已关闭），则调用localStorage.clear()来清空所有本地存储数据。
-
健壮性考虑:
- 浏览器兼容性: PerformanceNavigationTiming API在现代浏览器中广泛支持。对于需要支持旧版浏览器的应用，可能需要提供降级方案。
- 用户行为: 浏览器崩溃、强制关闭等非正常退出方式可能不会触发onbeforeunload事件，导致清理逻辑无法执行。在这种情况下，localStorage中的all_tabs列表可能会残留旧的tabID。应用程序需要具备一定的容错机制，例如在启动时检查all_tabs列表的有效性，并清理过期或无效的ID。
- 异步操作: 在onbeforeunload中执行异步操作（如网络请求）是不可靠的，因为浏览器可能会在异步操作完成前关闭页面。因此，所有清理逻辑应是同步的。
5. 总结
通过巧妙地结合window.onbeforeunload事件和PerformanceNavigationTiming API，我们可以精确地区分页面刷新和关闭事件。这使得在Web应用程序中实现基于浏览器会话生命周期的精细化数据管理成为可能，例如在最后一个标签页关闭时才清除敏感的本地存储数据，从而提升用户体验和数据一致性。在实际应用中，务必考虑浏览器兼容性和各种用户退出场景，以确保解决方案的健壮性。
