JS history对象的使用

history 对象包含用户在浏览器窗口中访问过的 URL，它是 window 对象的一个对象类型的属性，可通过 window.history 属性对其进行访问，使用时也可以省略 window。history 对象最初设计时用于表示窗口的浏览历史。

但出于隐私方面的原因，history 对象不再允许脚本访问已经访问过的 URL。现在可用的方法主要有 back()、forward()、go()、pushState() 和 replaceState()，其中，pushState() 和 replaceState() 是新增的方法，在主流浏览器上的一些较新版本（如 IE10+）上才可以用。

1. history对象属性

history 对象的属性主要是 length，该属性用于返回浏览器历史列表中的 URL 数量。

2. history对象方法

history对象的常用方法见表 1。

表 1：history 对象的常用方法

方法	描述
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go(number)	加载 history 列表中的某个具体页面。参数 number 是要访问的 URL 在 history 的 URL 列表中的相对位置，可取正数或负数。在当前页面前面的 URL 的位置为负数（如在前一个页面的位置为 -1 ）,反之则为正数
pushState(state, title, url)	添加指定的 url 到历史记录中，并且刷新将地址栏中的网址更新为 url
replaceState(state, title, url)	使用指定的 url 替换当前历史记录，并口无需刷新浏览器就会将地址栏中的网址更新为 url

pushState() 和 replaceState() 两个方法中的参数说明如下：

• state 参数：与第三个参数 url 相关的状态对象。当同一个文档的浏览历史出现变化触发 popstate 事件时，该对象会传入回调函数。如果不需要这个对象，可将其设置为 null；
• title 参数：新页面的标题，目前这个参数在所有浏览器中并没有效果，所以可将其设置为 null。

3.访问history对象的属性和方法的方式

访问history对象的属性和方法的方式如下：

[window.]history.属性
[window.]history.方法(参数1,参数2,…)

4. history对象的使用

history对象的使用示例：

history.back();//等效单击后退按钮
history.forward();//等效单击前进按钮
history.go(-1);//等效单击一次后退按钮,与history.back()功能等效
history.go(-2);//等效单击两次后退按钮
history.pushState(null,null,"test1.html");
history.replaceState(null,null,"test2.html");

假设当前页面的 URL 为 test.html，则在当前页面中存在上述示例中的最后两条代码。

假设 test1.html、test2.html 和 test.html 保存在同一目录下，则浏览器运行 test.html 文件时，当执行完 test.html 文件中的 pushState() 方法后，地址栏中的网址将会在没有刷新浏览器的情况下更改为 test1.html，同时历史记录中将会存在 test.html 和 test1.html 两条历史记录；而当执行完 replaceState() 方法后，地址栏中的网址将会在没有刷新浏览器的情况下更改为 test2.html。