使用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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
js尾调用优化的实现
May 23 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
js html实现计算器功能
2018/11/13 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
python可视化实现KNN算法
2019/10/16 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python如何在DataFrame增加数值
2020/02/14 Python
Python内存映射文件读写方式
2020/04/24 Python
Python 随机按键模拟2小时
2020/12/30 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
服装设计专业毕业生推荐信
2013/11/09 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
思想品德课教学反思
2014/02/10 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
广告学专业求职信
2014/06/19 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
英语导游欢迎词
2015/09/30 职场文书
初中信息技术教学反思
2016/02/16 职场文书