使用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 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
使用js原生实现年份轮播选择效果实例
Jan 12 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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
js获取当前页面路径示例讲解
2014/01/08 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
英国著名药妆店:Superdrug
2021/02/13 全球购物
教师师德承诺书
2014/03/26 职场文书
合作经营协议书范本
2014/04/17 职场文书
小学家长意见怎么写
2015/06/03 职场文书
超级礼物观后感
2015/06/15 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers