HTML5 History API

在 HTML5 的 History API 中,pushState 和 replaceState 方法也可以接受一个 state 对象作为参数。这些方法允许你在改变浏览器路由时不重新加载页面,并且可以附加一些自定义数据。

state

返回在 history 栈顶的 任意 值的拷贝。

let currentState = history.state;

结合router.push 方法来实现导航并传递状态

    router.push({path: '/xxx', state: {userId: '123', token: 'abc123'}});

存储和修改的状态对象

pushState

向浏览器的会话历史栈增加了一个条目。

pushState(state, unused)
pushState(state, unused, url)
  1. state:一个JavaScript对象,表示新的历史状态。这个对象可以包含任意的数据,用于保存页面的状态信息。
  2. title:新的历史记录的标题,但大多数浏览器忽略这个参数。
  3. url:新的历史记录的URL,可以是相对URL或绝对URL,但不能跨域。
history.pushState({page: 1}, "Page 1", "/page1");
// 这将添加一个新的历史记录,URL为/page1,状态对象为{page: 1}。
// 假设当前的 history.state 是这样的
const currentState = history.state || {};// 获取时间的值
const Time = time.value;// 创建新的 state 对象
const newState = {...currentState,  // 保留当前的 stateTime: Time ,
};// 使用 history.pushState 更新 state 并添加新条目
history.pushState(newState, document.title);

replaceState

使用状态对象和 URL 作为参数来修改当前的历史记录条目。

replaceState(state, unused)
replaceState(state, unused, url)
  1. state:一个JavaScript对象,表示要替换的历史状态,状态对象可以是 null
  2. title:新的历史记录的标题,但大多数浏览器忽略这个参数。
  3. url:替换后的URL,不能跨域。

使用demo

// 假设当前的 history.state 是这样的
const currentState = history.state || {};// 获取时间的值
const Time = time.value;// 创建新的 state 对象
const newState = {...currentState,  // 保留当前的 stateTime: Time ,
};// 使用 history.replaceState 更新 state 而不改变 URL
history.replaceState(newState, document.title);

锚点导航附带信息

function scrollToSection(sectionId, additionalData) {window.location.hash = sectionId;// 存储额外的状态信息window.sessionStorage.setItem(`section-${sectionId}-state`, JSON.stringify(additionalData));
}scrollToSection('#about-us', { timestamp: Date.now(), scrollPosition: window.scrollY });// 监听 hashchange 事件以恢复状态
window.addEventListener('hashchange', () => {const currentHash = window.location.hash.substring(1);const storedState = sessionStorage.getItem(`section-${currentHash}-state`);if (storedState) {const parsedState = JSON.parse(storedState);console.log('Restoring state for section:', currentHash, parsedState);// 执行相应的操作}
});

更多学习

History:pushState() 方法 - Web API | MDN

History:replaceState() 方法 - Web API | MDN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68845.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024“博客之星”——我的博客成长与技术洞察

🌟欢迎来到 我的博客 —— 探索技术的无限可能! 🌟博客的简介(文章目录) 目录 一、引言二、个人成长与突破盘点(一)技能提升与知识拓展(二)创作风格与影响力提升&#xf…

学生管理系统C++版(简单版)详解

有错请指出 啊~&#xff0c;答应大家的来了 头文件&#xff1a; #include<iostream> #include<stdlib.h> #include<windows.h> iostream是标准头文件&#xff0c;stdlib.h也可以写成cstdlib&#xff0c;windows.h&#xff0c;用Sleep 数据定义&#xff…

Apache Hive 聚合函数与 OVER 窗口函数:从基础到高级应用

在大数据时代&#xff0c;Apache Hive 是处理和分析海量数据的强大工具。Hive 提供了丰富的聚合函数和强大的 OVER 窗口函数&#xff0c;能够帮助我们高效地进行数据分析。本文将综合介绍 Hive 的聚合函数和 OVER 窗口函数&#xff0c;结合实际使用场景和代码示例&#xff0c;帮…

KOC营销2.0:出海品牌在2025年春节的创新故事讲述

在全球化日益加深的今天&#xff0c;春节已不再是中国独有的节日符号&#xff0c;它逐渐成为了世界各地文化交融的一部分。对于出海品牌而言&#xff0c;春节不仅是连接中国消费者与海外市场的桥梁&#xff0c;更是展示品牌文化深度与创意的重要契机。KOC营销作为新时代的传播策…

最新-CentOS 7安装1 Panel Linux 服务器运维管理面板

CentOS 7安装1 Panel Linux 服务器运维管理面板 一、前言二、环境要求三、在线安装四、离线安装1.点击下面1 Panel官网链接访问下载&#xff0c;如未登录或注册&#xff0c;请登录/注册后下载2.使用将离线安装包上传至目标终端/tem目录下3.进入到/tem目录下解压离线安装包4.执行…

C++|开源日志库log4cpp和glog

文章目录 log4cpp 和 glog对比1. **功能对比**2. **易用性和配置**3. **性能**4. **线程安全**5. **日志输出**6. **功能扩展**7. **适用场景**8. **总结** 其它开源C日志库1. **spdlog**2. **easylogging**3. **Boost.Log**4. **loguru**5. **Poco Logging**6. **Qt Logging (…

高频次UDP 小包丢包分析

目录 背景测试方法测试结果case1: (经过多级交换机)case2: 长时测试(经过多级交换机)case3: 长时测试(设备直联)可能原因分析解决方法背景 UDP作为面向非连接的传输协议,并不能保证可靠交付。本文编写代码测试设备之间UDP小包传输的可靠性。 测试方法 发送侧基于豆包…

基于springboot+vue的高校社团管理系统的设计与实现

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

vim在末行模式下的删除功能

删除:d :1d #删除第1行 :1,5d #删除第一行至第五行 :g/^\s*$/d #删除文件中的空白行 ——g所有 ——^表示行首 ——$表示行尾 ——\s 空白符 ——* 0至多个 示例&#xff1a;

DRG_DIP 2.0时代医院程序结构转型与数据结构优化研究

一、引言 1.1 DRG_DIP 2.0 改革背景与意义 医保支付方式改革在医疗保障制度改革中占据着极为关键的地位&#xff0c;是推动医疗领域变革的核心力量。它犹如一把精准的手术刀&#xff0c;对医疗资源的合理分配、医疗服务质量的稳步提升以及医疗费用的有效控制起着决定性作用。…

基于springboot体育运动会比赛系统

基于Spring Boot的体育运动会比赛系统是一个专为体育运动会组织和管理设计的现代化解决方案。 一、系统背景与目的 随着人们对健康生活的追求和对体育运动的热爱&#xff0c;体育运动会在各个层面得到了广泛的开展。然而&#xff0c;传统的体育运动会组织和管理方式存在着效率…

机遇、挑战与融合创新之路

高速通信技术引领变革 5G 持续升级&#xff1a; 2025 年&#xff0c;5G 进入 “下半场”&#xff0c;在政策升级的推动下&#xff0c;跨部门协同将使 5G 走深走实。能力上&#xff0c;5G 向 5G-A 升级演进&#xff0c;RedCap 技术加速推进&#xff0c;适配更多场景。应用方面&…

nginx 配置防爬虫

今天早上查看服务器&#xff0c;发现昨天发布的一个在线解析充电桩协议的网页工具有大量的访问记录&#xff0c;应该是爬虫在爬api接口数据。该工具api接口后台用的是python写的&#xff0c;和大多数项目一样也采用nginx反向代理&#xff0c;由于采用nginx&#xff0c;可以利用…

到华为考场考HCIE的注意事项和考试流程

大家好&#xff0c;我是张同学&#xff0c;来自成都职业技术学院2021级计算机网络专业。最近成功通过了 Datacom HCIE 考试&#xff0c;在这里和大家分享一下我的经验。 考证契机 在母校的培养下&#xff0c;我接触到ICT这个行业&#xff0c;打好了基础&#xff0c;开始了成…

es的date类型字段按照原生格式进行分组聚合

PUT student2 { "mappings": {"properties": {"name": {"type": "text","analyzer": "standard" // 使用标准分析器&#xff0c;适合姓名字段},"birthday": {"type": "date&…

代码随想录算法【Day28】

Day28 122.买卖股票的最佳时机 II 最终利润是可以分解的 假如第 0 天买入&#xff0c;第 3 天卖出&#xff0c;那么利润为&#xff1a;prices[3] - prices[0]。 相当于(prices[3] - prices[2]) (prices[2] - prices[1]) (prices[1] - prices[0])。 所以把利润分解为每天…

HarmonyOS快速入门

HarmonyOS快速入门 1、基本概念 UI框架&#xff1a; HarmonyOS提供了一套UI开发框架&#xff0c;即方舟开发框架&#xff08;ArkUI框架&#xff09;。方舟开发框架可为开发者提供应用UI开发所必需的能力&#xff0c;比如多种组件、布局计算、动画能力、UI交互、绘制等。 方…

Ext2 文件系统:数字世界的基石,深度解码超时空存储魔法

本篇博主将带大家深入底层探秘系统是如何与磁盘进行相互交流的&#xff0c;配合精美配图&#xff0c;细节讲解来带大家深入探究&#xff08;注&#xff1a;本篇文章建议了解磁盘内部物理结果组成及设计再进行阅读&#xff09;。 羑悻的小杀马特.-CSDN博客羑悻的小杀马特.擅长C…

在centos上编译安装opensips【初级-默认安装】

环境&#xff1a;centos9 last opensips3.2 dnf update -y dnf install -y gcc make git automake libtool pcre-devel libxml2-devel \libcurl-devel postgresql-devel \bzip2-devel zlib-devel ncurses-devel libuuid-devel \libpcap-devel # 有报错的直接删除cd /usr/lo…

从零到上线:Node.js 项目的完整部署流程(包含 Docker 和 CICD)

从零到上线&#xff1a;Node.js 项目的完整部署流程&#xff08;包含 Docker 和 CI/CD&#xff09; 目录 项目初始化&#xff1a;构建一个简单的 Node.js 应用设置 Docker 环境&#xff1a;容器化你的应用配置 CI/CD&#xff1a;自动化构建与部署上线前的最后检查&#xff1a;…