确定页面何时被刷新或重新加载

Question

我阅读了几篇关于刷新或重新加载页面以及如何确定这些情况的StackOverflow答案，尤其是检查JavaScript中页面是否被重新加载或刷新和检查JavaScript中页面是否被重新加载或刷新。这两个问题都有看似可以回答问题“如何确定页面何时被刷新或重新加载”的答案。

问题在于，被引用的PerformanceNavigation API似乎已经不再使用，而新的PerformanceNavigationTiming API看起来仍然没有准备好供生产使用。

我尝试使用了旧的接口和新的接口。旧版的PerformanceNavigation适用于Chrome、Firefox和Edge浏览器。

新版的PerformanceNavigationTiming似乎在这些浏览器中均无法工作。

以下是我从引用的一个问题中使用的代码。

if (window.PerformanceNavigation) {
    console.info("window.performance works fine on this browser");
}

if (window.PerformanceNavigationTiming) {
    console.info("window.performance works fine on this browser");
}

if (window.performance.navigation.type == "reload" ||      window.performance.navigation.type == 1) {
   console.info( "This page is reloaded" );
} else {
   console.info( "This page is not reloaded");
// console.info( "Value of Type is: " + window.PerformanceNavigationTiming.type()); 
}

if (window.PerformanceNavigationTiming.type == "reload" || window.PerformanceNavigationTiming.type == 1) {
    console.info( "This page is reloaded" );
} else {
    console.info( "This page is not reloaded");
// console.info( "Value of Type is: " + window.PerformanceNavigationTiming.type()); 
}

出于显而易见的原因，我真的不想使用已弃用的API。 但是我看不到解决这个问题的方式。 希望有一种非常简单的方法来解决这个问题。
所以，我的问题是：

1. 新接口被认为在旧接口被弃用时应该能够正常工作，是吗？

2. 如果新接口确实能够正常工作，那么我在尝试使用新接口时做错了什么。 我承认这可能是由于我缺乏经验。

3. 如果您能提供任何简单的示例，我会非常感激。

- Charles Brengel

---

那么，确切地说，问题是什么？ - RobG

另外，为什么你需要知道页面是否被刷新？也许原始问题有更好的解决方案？ - user5734311

抱歉，我真的好愚蠢。问题是：

1. 新接口不是应该在旧接口被弃用时能够正常工作吗？
2. 如果新接口确实可以使用，那我错在哪里了？我承认这可能是我的问题。

- Charles Brengel

还有localStorage/sessionStorage和indexedDB可以用来在重新加载页面时存储数据。 - Sebastian Speitel

这个回答解决了你的问题吗？从PerformanceNavigationTiming确定导航类型 - mercator

Answer 1

window.performance.navigation. 替换为 window.performance.getEntriesByType("navigation")

使用下面的代码片段尝试解决您的问题

if (window.performance.getEntriesByType) {
    if (window.performance.getEntriesByType("navigation")[0].type === "reload") {
        alert('reloaded')
    }
}

- Raad Altaie