使用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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
自动更新作用
Oct 08 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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 注释规范
2012/03/29 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
单位创先争优活动方案
2014/01/26 职场文书
农村改厕实施方案
2014/03/22 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
高中生毕业评语
2014/12/30 职场文书
2015年女职工工作总结
2015/05/15 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
七年级作文之游记
2019/12/11 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python