使用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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
jquery foreach使用示例
Sep 12 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
js时间查询插件使用详解
Apr 07 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
如何利用node转发请求详解
Sep 17 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP查询网站的PR值
2013/10/30 PHP
php生成rss类用法实例
2015/04/14 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
摘自启点的main.js
2008/04/20 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
从0开始学Vue
2016/10/27 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
运动会广播稿400字
2014/01/25 职场文书
九九重阳节标语
2014/10/07 职场文书
慈善募捐倡议书
2015/04/27 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang