使用JS判断页面是首次被加载还是刷新


Posted in Javascript onMay 26, 2019

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判断页面是首次被加载还是刷新,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
详解javascript数组去重问题
Nov 06 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
node.js express框架简介与实现
Jul 23 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 #Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 #Javascript
vue2.0 实现富文本编辑器功能
May 26 #Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 #Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 #Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 #Javascript
vue指令做滚动加载和监听等
May 26 #Javascript
You might like
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python随机模块random使用方法详解
2020/02/14 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
酒店管理专业毕业生推荐信
2013/11/10 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
《落花生》教学反思
2014/02/25 职场文书
公益广告语集锦
2014/03/13 职场文书
《分一分》教学反思
2014/04/13 职场文书
大学新生军训方案
2014/05/03 职场文书
员工离职通知函
2015/04/25 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
纪检监察立案决定书
2015/06/24 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL