JavaScript判断页面首次加载与刷新的几种方法

利用window.name判断

第一种方法利用window.name属性。该属性在页面刷新时不会重置，因此可以在属性为空的情况下使用此特性进行判断。

if(window.name == ""){
 console.log("首次被加载");
 window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 
}else if(window.name == "isReload"){
  console.log("页面被刷新");
}

使用sessionStorage或cookie

第二种方法是使用sessionStorage或cookie来进行状态判断。

其原理与window.name实现方式类似：在首次加载时设置一个固定值，随后通过判断该值是否存在来确定页面状态。

以下以sessionStorage为例进行说明。

if(sessionStorage.getItem("isReload")){
   console.log("页面被刷新");
}else{
 console.log("首次被加载");
 sessionStorage.setItem("isReload", true)
}

使用window.chrome对象（已弃用）

第三种方法涉及window.chrome对象，但该方法仅在谷歌浏览器中可用，其他浏览器没有chrome对象。

该对象提供了一个loadTimes()方法，执行该方法会返回一个包含页面性能信息的对象。其中包含一个navigationType属性，可用于判断页面是加载还是刷新。该属性有两个值：Reload（表示刷新）和Other（表示首次加载）。

因此，我们可以通过if语句进行判断。

if(sessionStorage.getItem("isReload")){
   console.log("页面被刷新");
}else{
 console.log("首次被加载");
 sessionStorage.setItem("isReload", true)
}

需要注意的是，使用window.chrome.loadTimes方法会触发浏览器警告。

isreload.html:20 [Deprecation] chrome.loadTimes() is deprecated, instead use standardized API: Navigation Timing 2. https://www.chromestatus.com/features/5637885046816768.

使用Navigation Timing 2标准API

官方已说明该方法被弃用，建议使用标准化API：Navigation Timing 2。因此，上述代码需要调整为使用标准API的实现方式。

if (window.performance.navigation.type == 1) {
 console.log("页面被刷新")
}else{
 console.log("首次被加载")
}

总结。

以上介绍了使用JavaScript判断页面是首次加载还是刷新的几种常见方法，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！