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

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

Back 和 Forward 方法

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

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

你也可以使用 pushStatereplaceState 方法改变页面的 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'
}
}
}

实现后的效果如下:

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

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

当我们在下拉框选择“先生”时,浏览器的地址会变成:localhost:5000/male。效果如下:

此时会有个问题,当我们点击前进/后退时,浏览器地址变了,但对应的数据却不对。因此,当进行前进/后退时,我们需要监听 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的更多相关文章

  1. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  2. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  3. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

  4. 理解浏览器历史记录(2)-hashchange、pushState

    本文也是一篇基础文章.继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变化对浏览器的历史记录也会影响,同时锚点的变化跟pushState也有一些关联.所以就花了点时间,把这两个东 ...

  5. JS操作DOM常用API总结

    <JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...

  6. 每次用 selenium 操作浏览器都还原了 (比如没有浏览器历史记录)

    每次用 selenium 操作浏览器都还原了 (比如没有浏览器历史记录)

  7. 用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

    如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见. 无论浏览器是否在线,navigator.onLine 属 ...

  8. 使用 W3C Performance 对象通过 R 和 JavaScript 将浏览器内的性能数据可视化[转]

    当考虑 Web 性能指标时,需要关注的目标数字应该是从您自己的用户那里获得的实际用户指标.最常见的方法是利用 Splunk 之类的工具来分析您的机器数据,该工具支持您分析和可视化您的访问权限和错误日志 ...

  9. JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)

    具有交互性的JavaScript程序使用的是事件驱动的程序设计模型.   目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...

随机推荐

  1. centos8平台使用pstree查看进程树

    一,pstree用途 Linux pstree命令将所有行程以树状图显示,树状图将会以 pid (如果有指定) 或是以 systemd 这个基本行程为根 (root) 说明:centos6及更旧版本为 ...

  2. 极简 Node.js 入门 - 5.3 静态资源服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  3. 第十三章 nginx代理服务

    一.数据库迁移 1.常见原因 1.数据库要做升级2.数据库服务器到期需要迁移 2.新服务器搭建数据库 [root@db02 ~]# yum install -y mariadb-server 3.启动 ...

  4. MVC查询

    前言 最近没什么好写的,所以写个查询来巩固一下知识 HTML @{ Layout = null; } <!DOCTYPE html> <html> <head> & ...

  5. suse使用镜像源

    创建挂载目录,随便建个目录 mkdir /mnt/cdrom 光盘连上,挂载光盘 mount -t iso9660 /dev/sr0 /mnt/cdrom/#确保挂上了ls看看/mnt/cdrom是否 ...

  6. GDB使用checkpoint复现bug

    今天面试被问到一个问题,如何调试多进程的程序,我回答gdb attach [pid],之后又问如果程序中有些数据读取不对,但这种现象是偶然发生的,这时候要怎么操作,当时就懵了......,通过查找资料 ...

  7. redis client原理分析

    代码库地址:https://github.com/garyburd/redigo 1:连接池 2:发送命令 3:解析结果 1:连接池 连接池结构体如下: type Pool struct { // D ...

  8. 实现图像上像素点与实际位置的GPS对应

    作者有话说 这篇随笔是基于我自己完成的一个项目,这个项目虽然看起来较为简单,但是由于我本身不是学这个方向的,因此在做的过程中还是遇到了一些大大小小的问题.经过仔细研究并多次调试代码,终于把这个问题的原 ...

  9. Boxing

    测试自动装箱和自动拆箱,意思是运行的时候编译器帮我们加了两个代码: public class AutoBoxingandUnBoxing { public static void main(Strin ...

  10. sqlsugar入门(3)-DateTime.ToString("yyyy-MM-dd HH:mm:ss.fff")源码修改

    1.注释SqlSugar\ExpressionsToSql\ResolveItems\MethodCallExpressionResolve文件下的GetMethodValue方法 case &quo ...