如何实现JS状态在新标签页保留但页面主动刷新时不被保留？

数据老陈

2026-9-27

可以实现，核心通过页面加载类型判断+会话存储能力组合完成

首先我们需要先区分「用户主动刷新页面」和「新标签/新窗口打开页面」两种场景的加载差异，这一点可以通过浏览器原生的性能导航API实现：
- 旧版API可以直接读取performance.navigation.type，值为1时代表当前是主动刷新触发的加载
- 新版标准用PerformanceNavigationTiming判断，读取performance.getEntriesByType('navigation')[0].type，值为reload时就是主动刷新
存储层直接用sessionStorage即可，它本身就支持「从当前页面打开的新标签/新窗口会自动继承父上下文的sessionStorage内容」的特性，刚好匹配我们新标签页保留状态的需求，只需要在识别到刷新场景时主动清空对应状态就能实现刷新不保留的效果。

示例实现代码

const CUSTOM_STATE_KEY = 'persist_state_new_tab';

window.addEventListener('DOMContentLoaded', () => {
  // 判断是否是主动刷新
  const navEntry = performance.getEntriesByType('navigation')[0];
  const isPageReload = navEntry?.type === 'reload' || performance.navigation?.type === 1;

  if (isPageReload) {
    // 刷新场景直接清空状态
    sessionStorage.removeItem(CUSTOM_STATE_KEY);
  } else {
    // 非刷新场景正常读取继承的状态
    const savedState = sessionStorage.getItem(CUSTOM_STATE_KEY);
    if (savedState) {
      // 此处编写你的状态恢复逻辑
      // const state = JSON.parse(savedState);
    }
  }

  // 业务逻辑中需要更新状态时直接写入即可
  // sessionStorage.setItem(CUSTOM_STATE_KEY, JSON.stringify(yourState))
})