使用JS判断页面是首次被加载还是刷新
更新时间：2019年05月26日 16:09:24 作者：玉沐丶
这篇文章主要介绍了js判断页面是首次被加载还是刷新，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
1 利用window.name属性在页面刷新时不会重置判断（在该属性空置的情况下可使用）
if(window.name == ""){
console.log("首次被加载");
window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值
}else if(window.name == "isReload"){
console.log("页面被刷新");
}
2 使用sessionStorage或cookie来判断
与window.name实现方法类似在首次加载时设置一个固定值 之后判断即可
这里以sessionStorage来为例
if(sessionStorage.getItem("isReload")){
console.log("页面被刷新");
}else{
console.log("首次被加载");
sessionStorage.setItem("isReload", true)
}
3 可以使用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.
官方已经说明该方法被弃用了 让我们使用 标准化API： Navigation Timing 2
所有上面代码需要改下：
if (window.performance.navigation.type == 1) {
console.log("页面被刷新")
}else{
console.log("首次被加载")
}
总结
以上所述是小编给大家介绍的使用JS判断页面是首次被加载还是刷新，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家介绍了echartjs实现cross十星辅助线实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家详细介绍了JavaScript实现table切换的插件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了如何使用JS实现一个这样的拖拽缩放效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
前端开发的童鞋应该都知道,JavaScript是一门单线程的脚本语言,这就意味着JavaScript 代码在执行的时候,只有一个主线程来执行所有的任务,同一个时间只能做同一件事情,这篇文章主要给大家介绍了关于JavaScript事件循环机制的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要展示了js仿黑客帝国字母掉落效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
JS上传多图片例子，为了更人性化，不要固定初始化时的个数，可以通过由用户决定上传图片的个数，即是动态地创建上传图片文框和按钮的个数，感兴趣的小伙伴们可以参考一下2015-09-09
今天小编就为大家分享一篇使用layer弹窗,制作编辑User信息页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了javascript限制用户只能输汉字中文的方法,实例列举了利用Unicode判断与正则判断两种方法,具有一定的实用价值,需要的朋友可以参考下2014-11-11
本篇文章主要介绍了原生JS+Canvas实现五子棋游戏实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了JS实现放烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
最新评论