React中如何仅检测标签页关闭以清除localStorage？

浏览器本身没有直接区分标签页关闭和页面刷新的原生API，但可以通过一些间接手段实现近似效果，以下是两种可行的实现方案：

方案一：页面可见性API + 定时器 #

原理：刷新页面时，页面会短暂隐藏后快速重新显示；而关闭标签页时，页面会直接隐藏且不会再恢复可见。利用这个差异，我们可以在beforeunload触发时设置定时器，若页面重新显示则取消清除操作，否则到期执行清除。

let clearStorageTimer;

// 监听页面可见性变化
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // 页面重新显示，判定为刷新操作，取消清除定时器
    clearTimeout(clearStorageTimer);
  }
});

window.addEventListener('beforeunload', function(e) {
  e.preventDefault();
  e.returnValue = '';
  
  // 设置1秒延迟，若1秒内页面未重新显示则执行清除
  clearStorageTimer = setTimeout(() => {
    localStorage.clear();
  }, 1000);
});

方案二：鼠标位置判断（桌面端适用） #

原理：关闭标签页时，用户通常会点击浏览器顶部的关闭按钮，此时鼠标会移出页面可视区域；而刷新页面时，鼠标大多在页面范围内操作。通过监听鼠标进出事件记录状态，在beforeunload时判断执行逻辑。

let isMouseOut = false;

// 记录鼠标移出页面状态
document.addEventListener('mouseleave', function() {
  isMouseOut = true;
});

// 鼠标返回页面时重置状态
document.addEventListener('mouseenter', function() {
  isMouseOut = false;
});

window.addEventListener('beforeunload', function(e) {
  e.preventDefault();
  e.returnValue = '';
  
  // 仅当鼠标移出页面时，判定为关闭标签页，执行清除
  if (isMouseOut) {
    localStorage.clear();
  }
});

注意事项 #

• 以上方案均为近似判断，无法做到100%精准，因为浏览器未提供区分两种操作的原生接口。
• 定时器的延迟时间可根据实际场景调整，避免因页面加载慢导致误判。
• 方案二仅适用于桌面端，移动端无法通过鼠标位置判断操作类型。

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