React JS中页面硬刷新时重置值，页面导航时不重置的实现方法

你的问题核心是beforeunload事件无法区分硬刷新和页面导航，导致两种场景都重置了状态。可以通过浏览器的Navigation API（兼容旧版浏览器可降级使用Performance Navigation API）来实现需求，思路是：在页面初始化时判断加载类型，仅在硬刷新时重置状态；页面正常导航离开时保存当前状态。

解决方案代码 #

// 初始化状态
let isExpanded;

const initState = () => {
  const storedState = JSON.parse(sessionStorage.getItem('SessionName'));
  // 判断是否为硬刷新（兼容新旧浏览器）
  const isHardRefresh = window.navigation?.type === 'reload' || performance.navigation?.type === 1;

  if (isHardRefresh) {
    // 硬刷新时强制设为false
    isExpanded = false;
    sessionStorage.setItem('SessionName', JSON.stringify({ isExpanded: false }));
  } else {
    // 其他场景（页面导航、前进后退）读取缓存状态，无缓存则设为默认false
    isExpanded = storedState?.isExpanded ?? false;
  }
};

// 页面隐藏时保存当前状态（包括导航离开、刷新）
const handlePageHide = () => {
  sessionStorage.setItem('SessionName', JSON.stringify({ isExpanded }));
};

// 执行初始化
initState();
// 绑定页面隐藏事件
window.addEventListener('pagehide', handlePageHide);

逻辑说明 #

1. 初始化阶段：

   • 读取sessionStorage中保存的状态
   • 通过window.navigation.type（现代浏览器）或performance.navigation.type（旧版浏览器）判断是否为硬刷新：
     • 现代浏览器中，硬刷新对应navigation.type = 'reload'
     • 旧版浏览器中，硬刷新对应performance.navigation.type = 1
   • 若是硬刷新，直接将isExpanded设为false并更新缓存；否则沿用缓存中的状态

2. 页面离开阶段：

   • 使用pagehide事件替代beforeunload，在页面隐藏（包括导航离开、刷新）时保存当前isExpanded状态到sessionStorage
   • 硬刷新时，虽然pagehide会保存当前状态，但页面重新加载时初始化逻辑会强制重置为false，不影响最终效果

3. 效果验证：

   • 硬刷新（F5/Ctrl+F5）：isExpanded被重置为false
   • 页面间导航（点击同域链接）：离开时保存当前状态，新页面加载时读取该状态，不会重置

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