React中如何检测用户关闭窗口而非刷新页面？

核心思路就是利用localStorage/sessionStorage存储页面卸载时间，结合页面加载时的时间差对比来判断场景：

具体实现步骤 #

• 页面卸载时（beforeunload事件），记录当前时间戳到存储中：

  window.addEventListener('beforeunload', () => {
    localStorage.setItem('pageUnloadTime', Date.now().toString());
  });
  

• 页面加载时（load事件），读取存储的卸载时间并计算时间差：

  window.addEventListener('load', () => {
    const unloadTime = localStorage.getItem('pageUnloadTime');
    if (unloadTime) {
      const timeDiff = Date.now() - parseInt(unloadTime);
      // 刷新的时间差通常在几百毫秒到1秒区间，可根据实际场景调整阈值
      const isRefresh = timeDiff < 2000;
      
      if (isRefresh) {
        console.log('页面是刷新操作');
      } else {
        console.log('页面是关闭后重新打开（间隔超过阈值）');
      }
    } else {
      console.log('页面首次加载');
    }
    // 处理完成后移除记录，避免干扰下次加载判断
    localStorage.removeItem('pageUnloadTime');
  });
  

关键注意事项 #

• 阈值调整：不同浏览器、设备的刷新耗时有差异，建议测试后将阈值设置在1500ms-3000ms之间。
• 存储选择：若仅需当前会话内有效（关闭浏览器后清除记录），改用sessionStorage；需跨会话保留判断依据则用localStorage。
• 极端场景兼容：如果浏览器崩溃、进程被强制关闭，beforeunload事件可能不触发，此时存储无卸载时间，会被判定为首次加载或长时间关闭。
• 隐私模式限制：部分浏览器隐私模式下会限制存储持久化，需做好兼容处理。

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