JS中如何在用户关闭浏览器销毁会话时触发对应函数？

现有方案的局限性说明 #

• PC端beforeunload事件本身是规范内实现，但移动端浏览器出于性能、用户体验考量，会在页面切入后台后冻结进程，直接拦截beforeunload、unload类事件触发，所以常规前端事件方案在移动端覆盖度不足
• visibilitychange仅能捕获页面可见性变化（比如切后台、切其他APP），无法区分是用户临时切出还是真的关闭浏览器，会出现大量误判

可行落地的方案组合 #

1. 前端侧兜底触发逻辑 #

前端优先组合监听三类事件，覆盖尽可能多的触发场景：

// 统一的会话结束处理函数
function handleSessionEnd() {
  // 你的业务逻辑，注意不要放耗时过长、需要用户交互的逻辑，优先用sendBeacon上报
  navigator.sendBeacon('/api/session-end', JSON.stringify({/* 待上传的参数 */}))
}

// 覆盖PC端关闭场景
window.addEventListener('beforeunload', handleSessionEnd)
// 覆盖移动端切后台/关闭的常见场景
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    handleSessionEnd()
  }
})
// 补充移动端部分浏览器支持的pagehide事件，进一步提升覆盖度
window.addEventListener('pagehide', handleSessionEnd)

注意：前端事件触发没有100%覆盖的方案，所有前端侧逻辑都只能做兜底，不能作为强依赖的统计/业务逻辑依据

2. 服务端session过期校验方案（强可靠方案） #

你提到的session方案是目前业界通用的可靠方案，逻辑如下：

• 给每个用户会话设置一个有效期，通常设置为10-30分钟
• 前端用户每活跃（点击、滚动、请求接口）一次，就刷新服务端session的有效期
• 服务端定时扫描过期的session，触发你要执行的对应业务逻辑
  这个方案完全不依赖前端事件的触发，是目前唯一能100%覆盖所有会话结束场景的方案，适合对准确性要求高的业务场景。

方案选型建议 #

• 如果业务对准确性要求不高，比如只是统计用户停留时长等非核心数据，用前端组合事件的方案即可，足够覆盖90%以上的场景
• 如果是需要强一致性的业务逻辑，比如用户未保存内容的临时存储恢复、会话状态校验等，必须搭配服务端session过期方案使用

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