React实现关闭同域所有标签页或浏览器时清除localStorage

核心思路是避开beforeunload无法区分刷新/关闭的缺陷，利用sessionStorage单标签页持久化（刷新不丢失、标签关闭即销毁）+跨标签页心跳检测做活跃标签计数，完全靠状态判断触发清理，不会出现单标签计数异常、刷新误触发的问题。

核心逻辑说明 #

之前手动统计标签页数量的方案出现异常，核心原因有两个：

• 依赖beforeunload/unload事件，页面刷新、单页跳转也会触发，无法区分操作类型
• 卸载事件触发时浏览器会终止异步任务，计数同步逻辑经常执行失败，导致最终计数不准

本方案的判断逻辑完全绕开卸载事件：

• 每个标签页初始化时生成唯一ID，存在当前标签的sessionStorage中，刷新页面不会丢失，仅当标签真正关闭时才会销毁
• 同域标签页通过BroadcastChannel做实时通信，每间隔固定时间发送心跳，同步自身存活状态
• 所有标签共同维护一份活跃标签映射表（存在localStorage中），记录每个标签ID的最后心跳时间
• 定时扫描活跃映射表，剔除超时未发心跳的标签ID，若剔除后活跃标签数为0，立即触发localStorage清理
• 浏览器直接关闭、设备断电等异常场景下，下次打开第一个同域页面时，会检测到历史活跃标签全部超时，自动触发兜底清理

React 具体实现（自定义Hook） #

直接封装成通用Hook，在项目根组件（比如App.tsx）挂载时调用即可：

import { useEffect, useRef } from 'react';

// 配置项
const CONFIG = {
  CHANNEL_NAME: '__same_domain_tab_sync_channel', // 跨标签通信频道名
  ACTIVE_TAB_MAP_KEY: '__active_tab_id_map', // 活跃标签表存储key
  HEARTBEAT_INTERVAL: 3000, // 心跳发送间隔 3s
  TIMEOUT_THRESHOLD: 10000, // 心跳超时阈值 10s
  // 配置需要清理的localStorage key前缀，不需要全量清理时修改即可
  CLEAR_KEY_PREFIX: 'your_business_',
};

const useClearStorageOnAllTabsClosed = () => {
  const channelRef = useRef<BroadcastChannel | null>(null);
  const heartbeatTimerRef = useRef<number | null>(null);
  const checkTimerRef = useRef<number | null>(null);

  useEffect(() => {
    // 初始化当前标签唯一ID，存在sessionStorage，刷新不丢失
    let currentTabId = sessionStorage.getItem('__current_tab_unique_id');
    if (!currentTabId) {
      currentTabId = crypto.randomUUID();
      sessionStorage.setItem('__current_tab_unique_id', currentTabId);
    }

    // 初始化跨标签通信频道
    channelRef.current = new BroadcastChannel(CONFIG.CHANNEL_NAME);

    // 工具方法：获取/更新活跃标签表
    const getActiveTabMap = (): Record<string, number> => {
      const raw = localStorage.getItem(CONFIG.ACTIVE_TAB_MAP_KEY);
      return raw ? JSON.parse(raw) : {};
    };
    const saveActiveTabMap = (map: Record<string, number>) => {
      localStorage.setItem(CONFIG.ACTIVE_TAB_MAP_KEY, JSON.stringify(map));
    };

    // 工具方法：执行指定localStorage清理
    const clearTargetStorage = () => {
      Object.keys(localStorage).forEach(key => {
        if (key.startsWith(CONFIG.CLEAR_KEY_PREFIX)) {
          localStorage.removeItem(key);
        }
      });
      // 清理完成后把活跃表也清掉
      localStorage.removeItem(CONFIG.ACTIVE_TAB_MAP_KEY);
    };

    // 初始化扫描：清理历史超时标签，若没有活跃标签则先清一次脏数据
    const initScan = () => {
      const map = getActiveTabMap();
      const now = Date.now();
      Object.keys(map).forEach(tabId => {
        if (now - map[tabId] > CONFIG.TIMEOUT_THRESHOLD) {
          delete map[tabId];
        }
      });
      if (Object.keys(map).length === 0) {
        clearTargetStorage();
      }
      // 把自己加入活跃表
      map[currentTabId] = Date.now();
      saveActiveTabMap(map);
    };
    initScan();

    // 心跳逻辑：定时广播自己的存活状态
    const sendHeartbeat = () => {
      const map = getActiveTabMap();
      map[currentTabId] = Date.now();
      saveActiveTabMap(map);
      channelRef.current?.postMessage({
        type: 'heartbeat',
        tabId: currentTabId,
        timestamp: Date.now(),
      });
    };
    heartbeatTimerRef.current = window.setInterval(sendHeartbeat, CONFIG.HEARTBEAT_INTERVAL);
    sendHeartbeat(); // 初始化先发一次

    // 监听其他标签的心跳，更新活跃表
    channelRef.current.onmessage = (e) => {
      if (e.data?.type === 'heartbeat') {
        const map = getActiveTabMap();
        map[e.data.tabId] = e.data.timestamp;
        saveActiveTabMap(map);
      }
    };

    // 定时扫描超时标签，活跃标签数归0时触发清理
    checkTimerRef.current = window.setInterval(() => {
      const map = getActiveTabMap();
      const now = Date.now();
      Object.keys(map).forEach(tabId => {
        if (now - map[tabId] > CONFIG.TIMEOUT_THRESHOLD) {
          delete map[tabId];
        }
      });
      saveActiveTabMap(map);
      if (Object.keys(map).length === 0) {
        clearTargetStorage();
      }
    }, CONFIG.HEARTBEAT_INTERVAL);

    // 组件卸载时清理定时器、关闭频道
    return () => {
      if (heartbeatTimerRef.current) clearInterval(heartbeatTimerRef.current);
      if (checkTimerRef.current) clearInterval(checkTimerRef.current);
      channelRef.current?.close();
    };
  }, []);
};

export default useClearStorageOnAllTabsClosed;

使用方式 #

在项目根组件引入调用即可，不需要额外传参：

import useClearStorageOnAllTabsClosed from './hooks/useClearStorageOnAllTabsClosed';

function App() {
  // 根组件挂载时启动逻辑
  useClearStorageOnAllTabsClosed();

  return <div>{/* 业务路由 */}</div>
}

兼容与注意事项 #

• 若需要兼容IE等不支持BroadcastChannel的环境，把跨标签通信逻辑替换成监听window.storage事件即可，核心判断逻辑完全不变
• 心跳间隔、超时阈值可以根据业务场景调整，常规场景下3s心跳+10s超时的配置不会出现误判，也不会带来明显性能开销
• 不需要全量清理localStorage时，修改CLEAR_KEY_PREFIX配置，只清理对应业务前缀的key即可，不会影响同域下其他业务线的存储
• 页面刷新、单标签关闭、路由跳转都不会误触发清理，只有最后一个同域标签关闭、或整个浏览器退出后才会执行清理，异常退出场景下次打开会自动兜底清脏数据

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