ReactJS：仅在标签页/浏览器关闭时清除localStorage而非刷新时

浏览器没有原生的“标签页关闭”专属事件，onbeforeunload会在刷新、关闭、跳转时全量触发，window.onClose本身就是不存在的方法，得用间接方式区分两种场景。

方案：定时器 + 页面加载事件 #

原理很直接：刷新页面时，beforeunload触发后页面会立刻重新加载，我们利用这个特性设置定时器——只有当页面没有重新加载（即标签页关闭）时，定时器才会执行清除操作。

代码示例：

// 声明定时器变量
let cleanupTimer;

// 监听页面卸载前事件
window.addEventListener('beforeunload', () => {
  // 设置短定时器，到时执行清除逻辑
  cleanupTimer = setTimeout(() => {
    // 按需清除：可以清除指定key，也可以清空整个localStorage
    localStorage.removeItem('shared-data-key');
    // localStorage.clear(); // 若要清空全部用这个
  }, 50);
});

// 页面加载完成时清除定时器（说明是刷新，不是关闭）
window.addEventListener('load', () => {
  clearTimeout(cleanupTimer);
});

补充说明 #

• 定时器时长设为50ms足够，页面刷新的load事件会在卸载后很快触发，能及时清除定时器；而关闭标签页时，页面不会再加载，定时器到期就会执行清除。
• 由于localStorage是同源共享的，关闭一个标签页清除数据后，其他标签页的共享数据会同步更新，符合跨标签页共享需求。
• 边缘情况优化：如果担心极端快速刷新导致定时器未被清除，可以结合performance API判断导航类型：

window.addEventListener('beforeunload', () => {
  const navType = performance.getEntriesByType('navigation')[0]?.type;
  // 仅当不是刷新/前进后退时才设置定时器
  if (navType !== 'reload' && navType !== 'back_forward') {
    cleanupTimer = setTimeout(() => {
      localStorage.removeItem('shared-data-key');
    }, 50);
  }
});

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