如何使用 JavaScript 操作浏览器历史记录 API


Posted in Javascript onNovember 24, 2020

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.value
 filterList(val)
}

function filterList(val) {
 let users = usersList.children
 for (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'
  }
 }
}

实现后的效果如下:

如何使用 JavaScript 操作浏览器历史记录 API

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

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

如何使用 JavaScript 操作浏览器历史记录 API

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

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

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

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

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

以上就是如何使用 JavaScript 操作浏览器历史记录 API的详细内容,更多关于JavaScript 操作历史记录api的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
javascript填充默认头像方法
Feb 22 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 #Javascript
原生js实现表格循环滚动
Nov 24 #Javascript
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Js利用正则表达式去除字符串的中括号
Nov 23 #Javascript
jQuery实现动态操作table行
Nov 23 #jQuery
JavaScript前后端JSON使用方法教程
Nov 23 #Javascript
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php 无限分类的树类代码
2009/12/03 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
angular分页指令操作
2017/01/09 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python实现点对点聊天程序
2018/07/28 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
详解pandas赋值失败问题解决
2020/11/29 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
机电专业大学生求职信
2013/10/04 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
Java使用jmeter进行压力测试
2021/07/09 Java/Android