首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

在 Web 中判断页面是不是刷新

编程知识
2024年09月10日 10:59

在 Web 开发中,我们经常需要区分用户是否通过刷新操作重新加载了页面。这一操作可能是由用户手动刷新(如按下 F5 键或点击浏览器刷新按钮)或通过浏览器自动重新加载。判断页面是否刷新有助于开发者优化用户体验,例如在使用 vue 的时候需要进行权限控制,就需要判断在刷新后根据登录者的权限去添加对应的路由。

本文将详细解析几种常见的判断页面是否刷新的技术方案,并探讨各自的适用场景、优缺点以及浏览器的兼容性。

1. 使用 window.name

window.name 是一个持久的窗口属性,它的值在页面刷新、甚至通过标签页导航到其他页面时也会保留,因此可以利用它来判断页面是否是通过刷新重新加载。

代码示例

window.onload = function() {
  if (window.name === 'isRefreshed') {
    console.log('页面被刷新');
  } else {
    console.log('首次加载页面');
    window.name = 'isRefreshed';
  }
};

工作原理

  • 首次加载时,window.name 是空字符串,通过设置它为 'isRefreshed' 来标记状态。
  • 刷新页面后,window.name 仍保持为 'isRefreshed',因此可以判断页面是通过刷新加载的。

优点

  • 简单易用:不依赖外部存储机制或服务器端逻辑。
  • 跨页面持久性:在页面间导航时,window.name 的值依然保持,适合跨页面场景。

缺点

  • 安全性问题window.name 的值在不同页面间共享,可能被其他页面读取。
  • 手动清理:在某些场景下可能需要手动清除 window.name,例如页面关闭时。

兼容性

window.name 是一个非常老的 Web API,几乎在所有浏览器中都有广泛的支持,包括:

2. 使用 sessionStorage

sessionStorage 是 Web 存储 API 的一部分,它为每个标签页维护独立的存储空间,并且其数据在标签页关闭后会被清空。我们可以利用 sessionStorage 来判断页面是否被刷新:

window.onload = function() {
  if (sessionStorage.getItem('isRefreshed')) {
    console.log('页面被刷新');
  } else {
    console.log('首次加载页面');
  }
  sessionStorage.setItem('isRefreshed', true);
};

工作原理

  • 当页面首次加载时,sessionStorage 中没有 isRefreshed 条目,因此可以判断这是首次加载。
  • 通过设置 sessionStorage.setItem('isRefreshed', true);,标记页面已加载。
  • 当页面刷新后,sessionStorage 中的 isRefreshed 条目依然存在,因此可以检测到页面的刷新操作。

优点

  • 简单且不依赖服务器端逻辑。
  • 只对当前标签页有效,适合单个页面或 SPA(单页应用)场景。

缺点

  • 关闭标签页或浏览器窗口后,sessionStorage 会被清空,无法保存状态。

兼容性

sessionStorage 是广泛支持的 API,适用于以下浏览器:

3. 使用 performance.navigation API

浏览器的 performance.navigation API 提供了页面加载的详细信息,包括是否是通过刷新操作加载的页面。通过检查 performance.navigation.type 属性可以判断页面的加载方式。

window.onload = function() {
  if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
    console.log('页面被刷新');
  } else {
    console.log('首次加载页面');
  }
};

属性解释

  • performance.navigation.TYPE_RELOAD: 表示页面通过刷新加载。
  • 其他类型(如 TYPE_NAVIGATE)表示正常导航。

优点

  • 直接提供了判断页面刷新与否的接口,较为精确。
  • 不需要手动存储状态。

缺点

  • 该 API 正在逐步弃用,未来的浏览器可能不会支持。
  • 不适合未来长期维护的项目,应考虑迁移到更新的 API,比如下文中的 performance.getEntriesByType

兼容性

performance.navigation API 在大多数浏览器中都被支持,但该 API 已逐步被弃用:

4. 使用 beforeunload 事件

beforeunload 事件在用户离开页面之前触发,无论是页面刷新、关闭还是导航到其他页面。在此事件中,我们可以设置一个标志位来判断用户是否通过刷新离开当前页面。

window.addEventListener('beforeunload', function() {
  localStorage.setItem('isRefreshed', 'true');
});

window.onload = function() {
  if (localStorage.getItem('isRefreshed') === 'true') {
    console.log('页面被刷新');
    localStorage.removeItem('isRefreshed');  // 刷新后清除标志位
  } else {
    console.log('首次加载页面');
  }
};

工作原理

  • 在页面卸载时(包括刷新),通过 beforeunload 事件设置一个标志位。
  • 页面重新加载时,根据该标志位判断页面是否通过刷新操作加载。

优点

  • 灵活,可以处理不同类型的页面离开操作。
  • localStorage 的数据不会在页面关闭时清除,因此可以用于判断跨页面的刷新。

缺点

  • beforeunload 事件在部分浏览器(尤其是移动端)可能表现不一致。
  • 如果用户清除了浏览器缓存或 localStorage,则无法正确判断。

兼容性

beforeunload 事件在大多数现代浏览器中都有广泛支持,但可能在一些移动端浏览器上表现不一致:

5. 使用 performance.getEntriesByType

performance.getEntriesByType("navigation") 是一个现代 Web 性能 API,用于获取页面导航的详细信息。通过这个方法,我们可以获取一个包含导航信息的对象,并通过检查该对象的 type 属性,判断页面是通过刷新加载还是其他方式进入的。

示例代码

window.onload = function() {
  const [navigationEntry] = performance.getEntriesByType('navigation');
  
  if (navigationEntry && navigationEntry.type === 'reload') {
    console.log('页面被刷新');
  } else {
    console.log('首次加载页面');
  }
};

工作原理

  • performance.getEntriesByType('navigation') 返回一个 PerformanceNavigationTiming 对象数组,其中包含页面导航的详细信息。
  • 通过检查 navigationEntry.type,可以确定页面加载的类型:
    • type === 'reload': 页面通过刷新加载。
    • type === 'navigate': 页面通过正常导航进入。
    • type === 'back_forward': 页面通过浏览器的前进或后退按钮加载。
    • type === 'prerender': 页面通过预渲染加载(这个状态通常不常见)。

优点

  • 现代性performance.getEntriesByType 是较新的 API,能够在现代浏览器中准确区分页面的导航方式。
  • 详细信息:除了判断页面刷新,还可以获取更多关于页面加载性能的数据,如 DNS 解析时间、请求时间等,有助于调优页面性能。
  • 无状态管理:无需依赖 sessionStoragelocalStorage 等外部状态,避免了状态同步问题。

缺点

  • 浏览器兼容性:虽然大多数现代浏览器支持此 API,但 Internet Explorer 不支持(现在已不是问题)。
  • 不适用于多次刷新:如果需要在用户进行多次刷新的情况下进行追踪,单次判断可能不足。

使用场景

performance.getEntriesByType 适合那些只需要快速判断页面是否是刷新加载的场景,并且同时有进一步性能优化需求的应用。对于现代 Web 开发,这是一个较为精确且无需额外存储或会话管理的解决方案。

监控页面加载性能示例

window.onload = function() {
  const [navigationEntry] = performance.getEntriesByType('navigation');

  if (navigationEntry) {
    console.log(`页面加载类型: ${navigationEntry.type}`);
    console.log(`页面加载时间: ${navigationEntry.loadEventEnd - navigationEntry.startTime} ms`);
  }
};

这种方式不仅能帮助判断页面加载类型,还能帮助开发者优化页面性能,提供更多性能数据来分析页面加载瓶颈。

兼容性

performance.getEntriesByType 是较新的 API,在现代浏览器中得到广泛支持,但较旧浏览器不支持:

总结

判断页面是否刷新是一个常见的需求,本文介绍了五种技术方案。每种方案都有其特定的适用场景和优缺点。总结如下:

方案 优点 缺点 浏览器兼容性
window.name 简单、易跨页面保持状态 安全性问题,需手动清理 适用于所有现代浏览器
sessionStorage 简单,不依赖复杂逻辑 关闭标签页时清空 支持现代浏览器及部分较旧浏览器
performance.navigation 直接提供页面刷新判断 API 正被弃用 广泛支持,但逐渐被废弃
performance.getEntriesByType 精确判断加载类型 较新,旧版浏览器不支持 仅支持现代浏览器
beforeunload 灵活,可处理多种离开页面的操作 部分浏览器不支持,尤其是在移动端 大多数现代浏览器支持

不同的方案各有优劣,开发者应根据应用的目标用户群体、性能需求和浏览器支持情况灵活选择。如果需要简单、跨页面的刷新判断,window.name 是一个不错的选择;而在需要更精确、现代化的判断方式时,performance.getEntriesByType 提供了更高的灵活性。

From:https://www.cnblogs.com/guojikun/p/18406148
本文地址: http://www.shuzixingkong.net/article/1892
0评论
提交 加载更多评论
其他文章 鸿蒙系统(HarmonyOS)全局弹窗实现
全局弹窗相对于自定义弹窗有以下优点: 封装更彻底,一行代码就能调用 跟组件耦合度低,只需要传入组件的UIContext对象,不需要跟自定义弹窗一样需要在组件内部实例化CustomDialogController对象 全局弹窗是鸿蒙在API 12增加的,PromptAction对象增加了openCus
鸿蒙系统(HarmonyOS)全局弹窗实现 鸿蒙系统(HarmonyOS)全局弹窗实现
Locust 进行分布式负载测试
什么是 Locust Locust 是一个开源的负载测试工具,用于测试网站和其他应用程序的性能。它通过编写 Python 脚本来定义虚拟用户的行为,模拟这些用户对目标系统发起请求。Locust 提供了一个直观的 Web 界面,允许用户实时监控测试进度和性能指标。 主要特性包括: Python 编写测
一文轻松搞定 tarjan 算法(二)(附带 tarjan 题单)
完结篇:tarjan 求割点、点双连通分量、割边(桥)(附 40 道很好的 tarjan 题目)。 上一篇(tarjan 求强连通分量,缩点,求边双) tarjan 求割点 还是求强联通分量的大致思路捏. 算法思路: 我们把图中的点分为两种: 每一个联通子图搜索开始的根节点 和 其他点。 判断是不是
一文轻松搞定 tarjan 算法(二)(附带 tarjan 题单)
.NET 8 微软免费开源的 Blazor UI 组件库
前言 .NET 8 的发布,微软推出了官方免费且开源的 Blazor UI 组件库 —— Fluent UI Blazor。 组件库提供了Web应用程序所需的工具,确保应用程序能够与 Microsoft 产品保持一致的外观和感觉。Fluent UI Blazor 不仅包含了对微软官方 Fluent
.NET 8 微软免费开源的 Blazor UI 组件库 .NET 8 微软免费开源的 Blazor UI 组件库 .NET 8 微软免费开源的 Blazor UI 组件库
架构师备考的一些思考(二)
前言 以我的视野来看,部长或技术总监这种岗位还是比较难竞争的,换言之,程序员的上升空间比较窄,如果想要拿到高级岗位,最好的是工作三五年后就转项目经理,然后再往上爬。 架构师倒是也能晋升高级岗位,但就效率而言,是非常低的。就我的经验而言,架构师系的高级职位通常是技术管理一手抓,但这也代表着,责任更大,
架构师备考的一些思考(二)
痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法
大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家分享的是在MDK开发环境下自定义安装与切换不同编译器版本的方法。 Keil MDK 想必是嵌入式开发者最熟悉的工具之一了,自 2005 年 Arm 公司收购 Keil 公司之后,MDK 就走上了发展快车道,从 v2.50a 一路狂奔到现在最新的
痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法 痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法 痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法
设计模式之状态模式(三分钟学会一个设计模式)
状态模式(State Pattern)的定义是这样的:类的行为是基于它的状态改变的。注意这里的状态不是狭义的指对象维护了一个“状态”字段,我们传入了不同的枚举值,对象整体的表现行为(对外方法)就改变了。而是指内部的(任意)字段如果发生了变化,那么它的状态就变了,那么它对外的表现形式就变了。它是面向对
设计模式之状态模式(三分钟学会一个设计模式)
Redis 入门 - C#|.NET Core客户端库六种选择
介绍了6款.NET系Redis客户端库:ServiceStack.Redis、StackExchange.Redis、CSRedisCore、FreeRedis、NewLife.Redis、BeetleX.Redis,各具特色,如商业支持、高性能、高并发、低延迟等,适合不同场景和需求。
Redis 入门 - C#|.NET Core客户端库六种选择 Redis 入门 - C#|.NET Core客户端库六种选择 Redis 入门 - C#|.NET Core客户端库六种选择