无法捕获unload事件：beforeunload绑定后不触发问题咨询

你写的beforeunload事件无法正常触发、达不到预期需求，核心是两个层面的问题：

• 事件用法不符合浏览器安全规范：
  现代浏览器对beforeunload事件有极强的限制：禁止在回调中调用alert()/confirm()/prompt()这类阻塞式弹窗，这类调用会被直接静默拦截；仅当你在回调中给e.returnValue赋值非空字符串、同时函数返回相同字符串时，才会弹出浏览器自带的统一离开确认提示，自定义提示内容、自定义弹窗都已经被全平台禁用。另外Chrome、Firefox等新版本浏览器还要求，只有用户和页面产生过点击、输入等实际交互后，beforeunload事件才会生效，打开页面无操作直接关闭时事件不会触发。
• 事件本身能力不匹配需求：
  beforeunload和后续的unload事件，会在页面刷新、跳转其他页面、关闭标签页/浏览器三种场景下无差别触发，根本无法区分刷新操作，就算事件正常触发，你在回调里清空localStorage的话，刷新页面时也会把数据清掉，完全达不到刷新保留的要求。

不要依赖beforeunload/unload做清空逻辑，利用sessionStorage的原生特性就能完美实现需求：sessionStorage在同一个标签页的页面刷新场景下会持久保留数据，只有关闭标签页、关闭浏览器时才会被自动清空，刚好可以用来做页面存活标记。
具体实现代码如下：

window.addEventListener('DOMContentLoaded', () => {
  const PAGE_ALIVE_FLAG = 'tab_session_active';
  // 无存活标记 = 新打开标签/上次关闭后重开，清空localStorage
  if (!sessionStorage.getItem(PAGE_ALIVE_FLAG)) {
    localStorage.clear();
  }
  // 写入存活标记，标签页不关闭的情况下刷新不会丢失
  sessionStorage.setItem(PAGE_ALIVE_FLAG, '1');
});

如果需要额外兼容用户在当前标签页输入外站地址跳转的场景，可以补充pagehide事件的兜底逻辑，注意不要在回调里加任何阻塞操作：

window.addEventListener('pagehide', () => {
  // 可在这里补充跳转场景下的额外清理逻辑，不要加弹窗、不要发异步请求
});

注意：所有页面卸载相关的生命周期事件，都不保证100%执行（比如浏览器进程直接崩溃、系统强制关机时事件不会触发），不要把核心业务逻辑的兜底完全依赖这类事件。

内容的提问来源于stack exchange，提问作者Rani Radcliff