关闭Chrome浏览器时pagehide事件未触发，无法存储退出统计怎么办？

问题根源 #

Chrome在关闭整个浏览器进程时，pagehide事件的触发机制存在兼容性问题，不如单个标签页关闭或页面导航时稳定。

可靠的实现方案 #

改用visibilitychange + beforeunload的组合事件，覆盖所有页面卸载/隐藏场景：

let isLogoutProcessed = false;

function submitLogoutStats() {
  if (isLogoutProcessed) return;
  isLogoutProcessed = true;
  // 替换成你的统计数据和接口地址
  const statsData = JSON.stringify({ userId: 123, sessionDuration: 3600 });
  navigator.sendBeacon('/api/user/logout-stats', statsData);
}

// 监听页面可见性变化：浏览器关闭、最小化、切换标签都会触发
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    submitLogoutStats();
  }
});

// 兜底监听beforeunload，覆盖部分特殊场景
window.addEventListener('beforeunload', (e) => {
  submitLogoutStats();
  // 保留空的returnValue避免浏览器默认提示，不需要自定义文本
  e.preventDefault();
  e.returnValue = '';
});

额外注意事项 #

• 必须使用navigator.sendBeacon：它是专门为页面卸载时发送数据设计的，异步且不阻塞页面关闭，不会像同步XHR或普通fetch那样被浏览器中断。
• 避免重复提交：用标记变量（比如isLogoutProcessed）防止多个事件触发时重复发送请求。
• 检查后端接收逻辑：确保后端能正确处理sendBeacon发送的POST请求，数据格式要匹配（比如JSON需要设置正确的Content-Type，或者后端能解析原始请求体）。
• 排除浏览器设置干扰：如果用户开启了「关闭浏览器时清除浏览数据」，可能会影响sendBeacon的发送，可提示用户关闭该选项，或后端设置一定的超时容忍。

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