JavaScript中无法检测页面重载？performance.navigation.type已失效求方案

由于performance.navigation.type已被所有主流浏览器弃用，你可以用以下两种方案来检测页面是否重载：

方案一：使用PerformanceNavigationTiming API（推荐） #

这是标准的替代方案，支持所有现代浏览器：

// 获取导航性能条目
const navigationEntry = performance.getEntriesByType('navigation')[0];

if (navigationEntry) {
  if (navigationEntry.type === 'reload') {
    console.info('This page is reloaded');
  } else {
    console.info('This page is not reloaded');
  }
}

navigationEntry.type的可能取值包括：

• navigate：首次加载或通过链接/地址栏导航
• reload：页面被重载（包括刷新按钮、F5、location.reload()）
• back_forward：通过浏览器前进/后退按钮导航
• prerender：页面被预渲染

方案二：使用sessionStorage（兼容性极强） #

如果需要兼容更老的浏览器，或者不想依赖性能API，可以用sessionStorage标记：

if (!sessionStorage.getItem('pageLoadedFlag')) {
  // 首次加载
  sessionStorage.setItem('pageLoadedFlag', '1');
  console.info('This is the first load');
} else {
  // 页面被重载
  console.info('This page is reloaded');
}

注意：当用户关闭标签页后重新打开，sessionStorage会被清除，此时会被误判为首次加载，但仅针对重载场景是有效的。

内容的提问来源于stack exchange，提问作者Hakimov-dev