1、概述
window对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
2、属性
2.1、length
2.1.1、概述
History.length 是一个只读属性，返回当前 session 中的 history 个数，包含当前页面在内。举个例子，对于新开一个 tab 加载的页面当前属性返回值 1。
2.1.2、语法
length = history.length;
2.1.3、示例
var result = window.history.length; // 返回当前 session 中的 history 个数
2.2、scrollRestoration
2.2.1、概述
History 的接口——scrollRestoration属性允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为
2.2.2、语法
const scrollRestore = history.scrollRestoration
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.");
}
防止自动恢复页面位置
if (history.scrollRestoration) {
history.scrollRestoration = "manual";
}
2.3、state
2.3.1、概述
返回在 history 栈顶的任意值的拷贝。 通过这种方式可以查看 state 值，不必等待 popstate 事件发生后再查看。
2.3.2、语法
let currentState = history.state;
如果不进行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}`);
3、方法
3.1、back()
3.1.1、概述
back()方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。
3.1.2、语法
window.history.back()
3.1.3、示例
下述简短示例使页面上的按钮导航页面至会话历史的后一项。
<button id="go-back">Go back!</button>
window.onload = function (e) {
document.getElementById("go-back").addEventListener("click", (e) => {
window.history.back();
});
};
3.2、forward()
3.2.1、概述
在会话历史中向前移动一页。它与使用delta参数为 1 时调用 history.go(delta)的效果相同。
3.2.2、语法
window.history.forward();
3.2.3、示例
下述例子创建了一个按钮，该按钮会在会话历史中向前移动一步。
<button id="go-forward">Go Forward!</button>
window.onload = function (e) {
document.getElementById("go-forward").addEventListener("click", (e) => {
window.history.forward();
});
};
3.3、go()
3.3.1、概述
go()方法从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。
3.3.2、语法
window.history.go(delta);
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);
3.4、pushState()
3.4.1、概述
在 HTML 文档中，history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。
3.4.2、语法
history.pushState(state, title[, url])
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);
3.5、replaceState()
3.5.1、概述
replaceState()方法使用state objects，title 和 URL 作为参数， 修改当前历史记录实体，如果你想更新当前的 state 对象或者当前历史实体的 URL 来响应用户的的动作的话这个方法将会非常有用。
3.5.2、语法
history.replaceState(stateObj, title[, url]);
3.5.3、参数
- stateObj
状态对象是一个 JavaScript 对象，它与传递给 replaceState 方法的历史记录实体相关联。
- title
大部分浏览器忽略这个参数，将来可能有用。在此处传递空字符串应该可以防止将来对方法的更改。或者，您可以为该状态传递简短标题
- url
可选
历史记录实体的 URL。新的 URL 跟当前的 URL 必须是同源；否则 replaceState 抛出一个异常。
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
