如何区分页面刷新、浏览器关闭、新标签页打开事件并做差异化处理

你原来的方案用sessionStorage的问题在于，sessionStorage是单标签页隔离的，新标签页打开同域页面时会初始化独立的sessionStorage空间，自然读取不到旧值，下面两种经过验证的方案可以满足需求： #

方案1：Performance API + 带标签计数的localStorage组合方案（兼容性最优） #

该方案兼容所有主流浏览器，不需要额外基建支持，实现逻辑如下：
核心规则：

• 同域下localStorage是所有标签页共享的，浏览器完全关闭后不会主动清除，但我们可以通过标签计数判断浏览器是否完全关闭
• 用PerformanceNavigationTiming API可以精准判断页面进入方式是刷新、普通导航（新标签页打开/地址栏输入/点击链接）

实现代码 #

// 页面初始化时执行
const navEntry = performance.getEntriesByType('navigation')[0];
// navEntry.type 取值：reload=刷新, navigate=普通导航, back_forward=前进后退
const pageEnterType = navEntry.type;

// 读取全局会话标识和标签计数
let sessionActive = localStorage.getItem('session_active');
let tabCount = Number(localStorage.getItem('tab_count')) || 0;

if (!sessionActive) {
  // 浏览器关闭后首次打开，走浏览器关闭后新启动的业务逻辑
  console.log('浏览器首次启动打开页面');
  localStorage.setItem('session_active', '1');
  tabCount = 1;
} else {
  tabCount += 1;
  if (pageEnterType === 'reload') {
    console.log('页面刷新场景');
    // 走刷新的业务逻辑
  } else if (pageEnterType === 'navigate') {
    console.log('新标签页/链接跳转进入场景');
    // 走新标签页打开的业务逻辑
  }
}
// 更新标签计数
localStorage.setItem('tab_count', tabCount.toString());

// 监听页面卸载事件，区分刷新和浏览器关闭
window.addEventListener('beforeunload', () => {
  let currentTabCount = Number(localStorage.getItem('tab_count')) || 0;
  currentTabCount -= 1;
  localStorage.setItem('tab_count', currentTabCount.toString());
  
  // 所有标签页都关闭时，清除会话标识
  if (currentTabCount <= 0) {
    // 加100ms延迟，避免刷新时误删标识
    setTimeout(() => {
      let finalTabCount = Number(localStorage.getItem('tab_count')) || 0;
      if (finalTabCount <= 0) {
        localStorage.removeItem('session_active');
        localStorage.removeItem('tab_count');
      }
    }, 100);
  }
});

注意事项 #

• 100ms的延迟是为了兼容刷新场景：刷新时旧页面的unload事件触发后，新页面会在极短时间内加载并把tab_count加回来，延迟到期后判断tab_count不为0就不会清除会话标识
• 如果用户手动清除浏览器本地存储，该方案会失效，属于可接受的异常边界

方案2：Service Worker 方案（准确率最高） #

如果你的站点已经接入Service Worker，可以用SW来托管会话状态：

• Service Worker的生命周期独立于单个标签页，只要浏览器没有完全关闭，SW的运行上下文就不会被销毁
• 可以在SW全局作用域中存储会话标识，页面加载时主动向SW查询标识是否存在即可区分是浏览器重启还是刷新/新标签页打开
• 浏览器完全关闭后SW会被系统回收，标识自动清空，不需要手动处理卸载逻辑和标签计数

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