---

1、概述

window对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

2、属性

2.1、length

2.1.1、概述

History.length 是一个只读属性，返回当前 session 中的 history 个数，包含当前页面在内。举个例子，对于新开一个 tab 加载的页面当前属性返回值 1。

2.1.2、语法

length = history.length;
1

2.1.3、示例

var result = window.history.length; // 返回当前 session 中的 history 个数
1

2.2、scrollRestoration

2.2.1、概述

History 的接口——scrollRestoration属性允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为

2.2.2、语法

const scrollRestore = history.scrollRestoration
1

2.2.3、返回值

• auto
  将恢复用户已滚动到的页面上的位置。
• manual
  未还原页上的位置。用户必须手动滚动到该位置。

2.2.4、示例

查看当前页面滚动恢复行为

const scrollRestoration = history.scrollRestoration;
if (scrollRestoration === "manual") {
	console.log("The location on the page is not restored, user will need to scroll manually.");
}
1
2
3
4

防止自动恢复页面位置

if (history.scrollRestoration) {
	history.scrollRestoration = "manual";
}
1
2
3

2.3、state

2.3.1、概述

返回在 history 栈顶的任意值的拷贝。 通过这种方式可以查看 state 值，不必等待 popstate 事件发生后再查看。

2.3.2、语法

let currentState = history.state;
1

如果不进行pushState() 和 replaceState()两种类型的调用，state 的值将会是 null。

2.3.3、示例

下面 log 例句输出 history.state 的值，首先是在没有执行 pushState() 语句进而将值 push 到 history 之前的 log。下面一行 log 语句再次输出 state 值，此时 history.state 已经有值。可以在脚本文件中执行下面语句，或者在控制台直接执行。

// 值为 null 因为我们还没有修改 history 栈
console.log(`History.state before pushState: ${history.state}`);

// 现在 push 一些数据到栈里
history.replaceState({ name: "Example" }, "pushState example", "page3.html");

// 现在 state 已经有值了
console.log(`History.state after pushState: ${history.state}`);
1
2
3
4
5
6
7
8

3、方法

3.1、back()

3.1.1、概述

back()方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。

3.1.2、语法

window.history.back()
1

3.1.3、示例

下述简短示例使页面上的按钮导航页面至会话历史的后一项。

<button id="go-back">Go back!button>
1

window.onload = function (e) {
	document.getElementById("go-back").addEventListener("click", (e) => {
		window.history.back();
	});
};
1
2
3
4
5

3.2、forward()

3.2.1、概述

在会话历史中向前移动一页。它与使用delta参数为 1 时调用 history.go(delta)的效果相同。

3.2.2、语法

window.history.forward();
1

3.2.3、示例

下述例子创建了一个按钮，该按钮会在会话历史中向前移动一步。

<button id="go-forward">Go Forward!button>
1

window.onload = function (e) {
	document.getElementById("go-forward").addEventListener("click", (e) => {
		window.history.forward();
	});
};
1
2
3
4
5

3.3、go()

3.3.1、概述

go()方法从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。

3.3.2、语法

window.history.go(delta);
1

3.3.3、参数

• delta

可选
相对于当前页面你要去往历史页面的位置。负值表示向后移动，正值表示向前移动。因此，例如：history.go(2)向前移动两页，history.go(-2)则向后移动两页。如果未向该函数传参或delta相等于 0，则该函数与调用location.reload()具有相同的效果。

3.3.4、示例

// 向后移动一页（等价于调用back()）：
window.history.go(-1);

// 向前移动一页，就像调用了forward()：
window.history.go(1);

// 向前移动两页：
window.history.go(2);

// 向后移动两页：
window.history.go(-2);

// 最后，以下任意一条语句都会重新加载当前页面：
window.history.go();
window.history.go(0);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.4、pushState()

3.4.1、概述

在 HTML 文档中，history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。

3.4.2、语法

history.pushState(state, title[, url])
1

3.4.3、参数

• state

状态对象是一个 JavaScript 对象，它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时，都会触发popstate事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。
状态对象可以是任何可以序列化的对象。 因为 Firefox 将状态对象保存到用户的磁盘上，以便用户重新启动浏览器后可以将其还原，所以我们对状态对象的序列化表示施加了 2MiB 的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给pushState()，则该方法将引发异常。 如果您需要更多空间，建议您使用 sessionStorage或者localStorage。

• title

当前大多数浏览器都忽略此参数，尽管将来可能会使用它。 在此处传递空字符串应该可以防止将来对方法的更改。 或者，您可以为要移动的状态传递简短的标题。

• url 可选

新历史记录条目的 URL 由此参数指定。 请注意，浏览器不会在调用pushState() 之后尝试加载此 URL，但可能会稍后尝试加载 URL，例如在用户重新启动浏览器之后。 新的 URL 不必是绝对的。 如果是相对的，则相对于当前 URL 进行解析。 新网址必须与当前网址相同 origin； 否则，pushState()将引发异常。 如果未指定此参数，则将其设置为文档的当前 URL。

3.4.4、示例

以下代码通过设置state，title和url创建一条新的历史记录。

const state = { page_id: 1, user_id: 5 };
const title = "";
const url = "hello-world.html";

history.pushState(state, title, url);
1
2
3
4
5

3.5、replaceState()

3.5.1、概述

replaceState()方法使用state objects，title 和 URL 作为参数， 修改当前历史记录实体，如果你想更新当前的 state 对象或者当前历史实体的 URL 来响应用户的的动作的话这个方法将会非常有用。

3.5.2、语法

history.replaceState(stateObj, title[, url]);
1

3.5.3、参数

• stateObj

状态对象是一个 JavaScript 对象，它与传递给 replaceState 方法的历史记录实体相关联。

• title

大部分浏览器忽略这个参数，将来可能有用。在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为该状态传递简短标题

• url

可选
历史记录实体的 URL。新的 URL 跟当前的 URL 必须是同源；否则 replaceState 抛出一个异常。

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！