本文探讨了如何精确区分浏览器页面刷新和关闭事件，以解决window.onunload或onbeforeunload在两种情况下都会触发的问题。通过利用PerformanceNavigationTiming API的type属性，我们可以识别导航类型（如’reload’），从而在用户关闭浏览器而非仅仅刷新页面时，执行特定的清理逻辑，例如清除localStorage中跟踪的活跃标签页信息，确保数据管理的准确性。
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应用程序中实现基于浏览器会话生命周期的精细化数据管理成为可能，例如在最后一个标签页关闭时才清除敏感的本地存储数据，从而提升用户体验和数据一致性。在实际应用中，务必考虑浏览器兼容性和各种用户退出场景，以确保解决方案的健壮性。
以上就是区分页面刷新与关闭，精准控制onbeforeunload事件触发逻辑的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/44779.html
微信扫一扫 
支付宝扫一扫 
