如何用JavaScript精准检测页面关闭与跳转并操作localStorage？

首先明确：没有原生专用事件能直接区分页面关闭和跳转，但可以通过以下几种方案组合判断，实现你的需求：

方案1：监听链接点击，标记跳转意图 #

通过监听同域链接的点击事件，提前标记用户的跳转行为，再在页面卸载事件中判断是否需要清空localStorage：

let isNavigating = false;

// 监听所有同域链接的点击事件
document.addEventListener('click', (e) => {
  const targetLink = e.target.closest('a');
  // 确认点击的是同域链接
  if (targetLink && targetLink.origin === window.location.origin) {
    isNavigating = true;
  }
});

window.addEventListener('beforeunload', () => {
  // 未标记跳转则视为页面关闭，清空localStorage
  if (!isNavigating) {
    localStorage.clear();
  }
});

// 页面重新显示时重置标记，避免返回页面后状态异常
window.addEventListener('pageshow', () => {
  isNavigating = false;
});

说明：这个方案能覆盖大多数用户主动点击同域链接的场景，但如果是通过脚本触发的跳转（比如window.location.href），需要手动设置isNavigating = true。

方案2：利用现代Navigation API #

现代浏览器支持的Navigation API可以精准捕获导航行为，包括脚本触发的跳转：

let isNavigating = false;

navigation.addEventListener('navigate', (event) => {
  // 判断是否是离开当前页面的跨页导航（排除SPA内部路由跳转）
  if (event.destination.url !== window.location.href) {
    isNavigating = true;
  }
});

window.addEventListener('beforeunload', () => {
  if (!isNavigating) {
    localStorage.clear();
  }
});

说明：兼容性要求Chrome 90+、Edge 90+、Safari 15.4+，如果需要兼容旧浏览器，建议结合方案1使用。

方案3：结合旧版Performance Navigation API（辅助判断） #

虽然该API已被逐步弃用，但部分旧浏览器仍支持，可作为辅助判断逻辑：

window.addEventListener('beforeunload', () => {
  const navEntry = performance.getEntriesByType('navigation')[0];
  // 排除刷新、历史记录跳转的场景，其余情况视为页面关闭
  if (navEntry?.type !== 'reload' && navEntry?.type !== 'back_forward') {
    localStorage.clear();
  }
});

注意事项：

• 优先使用beforeunload而非unload事件，因为unload中异步操作可能被浏览器拦截，导致逻辑失效。
• 跨域跳转场景：如果用户跳转到其他域名，方案1的同域链接监听不会触发，会被判断为页面关闭；若需要区分跨域跳转与关闭，目前没有完全可靠的方法，只能结合业务场景做折中处理。

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