JavaScript 操作历史记录api怎样使用 JavaScript

JavaScript 操作历史记录api怎样使用 JavaScript 

History 是 window 对象中的一个 JavaScript 对象,它包含了关于浏览器会话历史的详细信息。你所访问过的 URL 列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是 history 的信息。

History 对象包含长度属性,它包含了会话历史记录栈中的 URL 数量。例如,如果用户在浏览器中打开一个标签页,历史记录的长度将是 1(新的标签页也是一个网页)。然后用户输入一个网址 foo.com 并点击回车,现在历史记录对象的长度将是 2, 用户转到其他页面 bar.com,历史记录对象的长度将就是 3 了。

Back 和 Forward 方法

你可以使用 history 对象的 back 和 forward 方法来浏览网页。例如,如果你想转到上一个页面,那么可以使用:

history.back()

同样的,如果你想转到下一页,你可以使用:

history.forward()

Go 方法

如果您想向前或向后移动 n 个页面,那么您可以使用 go 方法:

history.go(-2) // 倒退 2 页
history.go(2) // 前进 2 页

所以 history.go(1) 和 history.forward() 效果是相同的,history.go(-1) 和 history.go(-1) 效果是相同的。history.go 方法的默认值为 0,如果不传任何数字,则当前页面会被刷新。

window.history.go(0)
window.history.go()

PushState

你也可以使用 pushState 和 replaceState 方法改变页面的 URL。pushState 会改变页面的 URL,并将改变后的 URL 添加到 history 对象的 URL 栈顶部。语法如下:

history.pushState(state, title, url)

参数 state 是状态数据,它将被存储在 history.state 变量中。参数 title 是标题文本,不过它对大多数浏览器都没有效果,所以一般传空字符串("")或传 null 就可以了。

让我们在控制台中尝试一下,在执行之前,比如打开 baidu.com,然后在控制台输入:

history.pushState('123', '', 'new-url')

执行上面的代码后,它会将页面地址栏中的 URL 改为 baidu.com/new-url,同时将 URL 添加到 history 对象中。此时检查 history.length 会增加 1。

除此之外,我们还可以为每个 URL 存储状态(当前页面的数据)。在上面的例子中,你会把 "123" 存储在 history.state 变量中,当你返回到这个页面时,你就可以 history.state 再次拿到到这些数据。例如:

history.pushState('temp data 1', 'title', 'new-url-1')
history.state //"temp data 1"
history.pushState('temp data 2', 'title', 'new-url-2')
history.state //"temp data 2"
history.back()
history.state // "temp data 1"

每当通过 pushState 返回到之前被添加到历史记录的页面时,浏览器就会触发一个名为 popstate 的事件,并将 state 数据作为参数。比如在浏览器打开一个新标签页,进入某个网页(比如 baidu.com),先监听 popstate 事件:

window.addEventListener('popstate', (e) => console.log(e))

然后调用 pushState:

history.pushState({ name: 'test1' }, 'title', 'test1')

然后按下返回按钮,popstate 事件就会被触发,你可以在监听事件中查看打印出来的数据。在打印的数据中,可以找到 history.state 的值。

注册 pushState 中的 url 可以是完整的 url,但必须和当前页面是相同的域名,否则会抛出跨域异常。

浏览器还有一个 replaceState API,和 pushState 的区别是,它只改变了 URL,不会将 URL 添加到历史记录,这里就不再累述了。

实例演示

现在我们做一个小的网页应用,这个应用将实现如下功能:

  1. 显示用户列表
  2. 可以通过下拉框筛选“先生”和“女士”
  3. 当下列列表发生变化时,URL 也会相应的变化

我们先不关心 history API,先实现功能。下面是 html 关键代码:

<select id="selectbox"><option value="both">全部</option><option value="male">先生</option><option value="femalt">女士</option>
</select>
<ul id="userslist"><li gender="male">张先生</li><li gender="female">李女士</li><li gender="female">王女士</li>
</ul>

下面是 javascript 关键代码:

let selectBox = document.getElementById('selectBox')
let usersList = document.getElementById('usersList')selectBox.addEventListener('change', onSelectBoxChange)function onSelectBoxChange(ev) {let val = this.valuefilterList(val)
}function filterList(val) {let users = usersList.childrenfor (let i = 0; i < users.length; i++) {let user = users[i]let gender = user.getAttribute('gender')if (gender === val || val === 'both') {user.style.display = ''} else {user.style.display = 'none'}}
}

实现后的效果如下:

当修改下拉列表时,为了使浏览器地址也发生变化,需要使用 pushSate 方法:

function onSelectBoxChange(ev) {let val = this.valuefilterList(val)history.pushState({ gender: val }, null, val)
}

此时会有个问题,当我们点击前进/后退时,浏览器地址变了,但对应的数据却不对。因此,当进行前进/后退时,我们需要监听 popstate 重新过滤数据:

window.addEventListener('popstate', onPopState)
function onPopState(ev) {let state = ev.statefilterList(state.gender)
}

我们还需要处理页面刷新的问题。当刷新页面时,历史记录不会改变,history.state 的状态值也保持不变。所以我们可以从 history.state 中取出当前的状态数据,利用 state.gender 的值就可以在 load 事件中来过虑出当前 URL 对应的用户列表:

window.addEventListener('load', function () {let gender = history.state ? history.state.gender : 'both'filterList(gender)
})

这是个简单的示例,你也可以继续进一步优化。今天的分享就到这里,有问题请在下面留言哦~~

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

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

相关文章

WeiSpeechSynthesizer.java

目录 1 WeiSpeechSynthesizer.java 1.1 onSpeakProgress 1.2 onSpeakPaused 1.3 onCompleted WeiSpeechSynthesizer.javainitListener private InitListener initListener=new InitListener() {@Override

【数据结构和算法】位图 BitMap

1. 位图结构的实现 /*** 位图数据类型 <br />* 位图以字节的一位为单位进行元素的操作&#xff0c;但是位运算以一个字节整体为运算单位&#xff0c;因此代码中以 bytes[index] 进行运算。* 位图元素的添加即找到相应的位置&#xff0c;将其置为1&#xff0c;实现时将该…

Redis_五种数据类型及操作命令

5.redis常用的五种数据类型 5.1 Redis String字符串 5.1.1 简介 String类型在redis中最常见的一种类型string类型是二制安全的&#xff0c;可以存放字符串、数值、json、图像数据value存储最大数据量是512M 5.1.2 常用命令 set < key>< value>&#xff1a;添加…

构造函数——初始化列表

初始化列表的引入。 #include<iostream> using namespace std;//栈类 typedef int DataType; class Stack { public://默认构造&#xff1a;Stack(size_t capacity ){cout << "Stack()" << endl;_array (DataType*)malloc(sizeof(DataType) * ca…

【golang】怎样判断一个变量的类型?

怎样判断一个变量的类型&#xff1f; package mainimport "fmt"var container []string{"zero", "one", "two"} func main() {container : map[int]string{0: "zero", 1: "one", 2: "two"}fmt.Printf…

享元模式(C++)

定义 运用共享技术有效地支持大量细粒度的对象。 使用场景 在软件系统采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中&#xff0c;从而带来很高的运行时代价——主要指内存需求方面的代价。如何在避免大量细粒度对象问题的同时&#xff0c;让外部客户程序仍…

JavaWeb过滤器

目录 接口中的方法 init destroy doFilter 在web.xml中配置 作用 Filter也称之为过滤器&#xff0c;它是Servlet技术中最实用的技术&#xff0c;WEB开发人员通过 Filter技术&#xff0c;对web服务器管理的所有web资源&#xff1a;例如Servlet, 从而实现一些 特殊的功能。…

虚拟ip地址软件 怎么修改自己的网络ip地址

修改自己的网络IP地址在日常生活中&#xff0c;有时候我们可能需要修改自己的网络IP地址&#xff0c;这可能是由于网络问题、安全性考虑、建议使用第三方深度ip转换器切换ip地址。不用担心&#xff0c;下面将为大家介绍几种常见的修改网络IP地址的方法。 1. 通过重新连接网络&a…

128.【Maven】

Maven仓库 (一)、Maven 简介1.传统项目管理的缺点2.Maven是什么3.Maven的作用 (二)、Maven 的下载与安装1.下载与认识目录2.配置Maven的全局环境 (三)、Maven 的基础概念1.Maven 仓库(1).仓库分类 2. Maven 坐标3.Maven 本地仓库配置(1).改变默认的仓库地址(2).改变远程仓库地址…

mac电脑 node 基本操作命令

1. 查看node的版本 node -v2. 查看可安装的node版本 sudo npm view node versions3. 安装指定版本的node sudo n 18.9.04. 安装最新版本node sudo n latest5. 安装最新稳定版 sudo n stable6. 清楚node缓存 sudo npm cache clean -f7. 列举已经安装的node版本 n ls 8. 在…

代码随想录算法训练营第46天| 139.单词拆分 关于多重背包,你该了解这些! 背包问题总结篇!

今日学习的文章链接&#xff0c;或者视频链接 第九章 动态规划part08 自己看到题目的第一想法 看完代码随想录之后的想法 139: class Solution { public:bool wordBreak(string s, vector<string>& wordDict) {unordered_set<string> wordSet(wordDict.b…

【并发编程】无锁环形队列Disruptor并发框架使用

Disruptor 是苹国外厂本易公司LMAX开发的一个高件能列&#xff0c;研发的初夷是解决内存队列的延识问顾在性能测试中发现竟然与10操作处于同样的数量级)&#xff0c;基于Disruptor开发的系统单线程能支撑每秒600万订单&#xff0c;2010年在QCn演讲后&#xff0c;获得了业界关注…

c++11-14-17_内存管理(RAII)_多线程

文章目录 前言&#xff1a;什么是RAII&#xff1f;指针/智能指针&#xff1a;使用智能指针管理内存资源&#xff1a;unique_ptr的使用&#xff1a;自定义删除器&#xff1a; shared_ptr的使用&#xff1a;shared_ptr指向同一个对象的不同成员&#xff1a;自定义删除函数&#x…

期权定价模型系列【2】—期权的希腊字母计算及应用

本篇文章旨在介绍期权常见希腊字母的计算及应用 本专栏更多侧重于理论及文字方面的展示&#xff0c;文章具体的代码可以参考我的另一个专栏【期权量化】。 【期权量化】专栏有同名文章&#xff0c;并且给出了文章的具体代码。 专栏地址&#xff1a; http://t.csdn.cn/Y30Hk…

谈谈Java开发语言

目录 1.概念 2.特点 3.应用领域 4.就业情况 1.概念 Java是一种面向对象的编程语言&#xff0c;它由James Gosling和他的团队在1995年于Sun Microsystems&#xff08;现在是Oracle Corporation&#xff09;开发出来。Java的设计目标是让开发者能够编写一次代码&#xff0c;在…

Arcgis中POI找到建筑面内距离最近的标准地址通过模型构建器来实现

背景 之前写过一篇文章 Arcgis通过矢量建筑面找到POI对应的标准地址 这里面的大致思路跟本篇文章是类似的&#xff0c;不过上一篇文章有部分有瑕疵&#xff0c;就是在POI去找建筑面内的标准地址时&#xff0c;找到的虽然是建筑面内的&#xff0c;但是不一定是距离最近的&#…

登录界面中图片验证码的生成和校验

一、用pillpw生成图片验证码 1、安装pillow pip install pip install pillow2、下载字体 比如&#xff1a;Monaco.ttf 3、实现生成验证码的方法 该方法返回一个img ,可以把这个img图片保存到内存中&#xff0c;也可以以文件形式保存到磁盘&#xff0c;还返回了验证码的文字…

走出象牙塔:李郓梁的区块链实践之路丨对话MVP

如何从科研走向实践&#xff1f;李郓梁在社区找到了答案。 作为西安工业大学的硕士研究生&#xff0c;李郓梁从学校的实验室接触区块链技术。通过研读大量论文&#xff0c;李郓梁为区块链多中心化、不可篡改等前沿理论深深着迷&#xff0c;并选择将区块链作为主要研究方向&…

[前端系列第1弹]HTML入门教程:从零开始学习Web页面的基础知识

HTML是一种用于描述Web页面内容和结构的标记语言&#xff0c;它由一系列的标签&#xff08;tag&#xff09;组成&#xff0c;每个标签都有特定的含义和功能。HTML标签可以嵌套使用&#xff0c;形成一个树状的文档对象模型&#xff08;Document Object Model, DOM&#xff09;。…

使用gewe框架进行微信群组管理(一)

友情链接&#xff1a;geweapi.com 点击访问即可。 管理员操作 小提示&#xff1a; 添加、删除、转让多个wxid时仅限于添加/删除管理员&#xff0c;1添加 2删除 3转让 请求URL&#xff1a; http://域名地址/api/group/admin 请求方式&#xff1a; POST 请求头&#xff1a…