Angular中如何处理支持浏览器回退的window unload事件？

前端侧替换方案（解决unload兼容问题） #

直接用pagehide + visibilitychange事件组合替代废弃的unload事件，同时使用浏览器专门为卸载场景设计的请求API保证请求能成功发出：

• pagehide事件完全兼容浏览器前进/后退缓存，用户点击回退、跳转其他页面、关闭标签页/浏览器等主动离开场景都会触发，完美覆盖你需要的主动操作场景
• 发送删除请求不要用普通AJAX/fetch（页面卸载时会被强制中断），优先用Navigator.sendBeacon()，浏览器会保证在后台完成请求发送，不会阻塞页面卸载流程

代码示例（Angular环境） #

// 监听pagehide事件，覆盖所有页面卸载/进入缓存的场景
@HostListener('window:pagehide', ['$event'])
pageHideHandler($event: PageTransitionEvent) {
  this.sendDeleteRequest();
}

// 兜底监听visibilitychange，覆盖部分移动端切换应用后直接杀页面的场景
@HostListener('document:visibilitychange', ['$event'])
visibilityChangeHandler() {
  if (document.visibilityState === 'hidden') {
    // 页面永久隐藏时触发，避免部分特殊场景pagehide没触发的问题
    this.sendDeleteRequest();
  }
}

private sendDeleteRequest() {
  const deleteParams = new FormData();
  deleteParams.append('userId', this.currentUserId);
  deleteParams.append('sessionId', this.userSessionId);

  if (navigator.sendBeacon) {
    // 优先用sendBeacon，兼容性最好
    navigator.sendBeacon('/api/user/delete-session-data', deleteParams);
  } else {
    // 低版本浏览器降级用带keepalive属性的fetch
    fetch('/api/user/delete-session-data', {
      method: 'POST',
      body: deleteParams,
      keepalive: true
    });
  }
}

如果你的应用是单页应用，内部路由跳转的回退不会触发页面级事件，需要额外监听框架的路由销毁/跳转事件做补充处理

前后端配合兜底方案（覆盖极端异常场景） #

前端事件无法覆盖浏览器进程崩溃、设备突然断电等极端异常场景，需要后端配合心跳机制做区分：

• 前端每隔30s向后端发送一次心跳请求，更新当前用户的在线状态
• 后端记录每个用户的最后心跳时间，设置超时阈值为70s（2倍心跳间隔+冗余时间）
• 若后端收到前端主动发送的删除请求，直接删除对应用户数据
• 若后端未收到删除请求，且最后心跳时间超过阈值，判定为异常断开，保留用户数据

这样就可以100%覆盖所有主动关闭和异常断开的场景，不会出现误删或者漏删的问题。

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