Web history API（ 历史 API）
在 JavaScript 中，history API 允许我们访问浏览器的历史记录。它可用于浏览历史记录。
JavaScript History API 为我们提供了操作窗口历史对象的方法。History 对象是 JavaScript 窗口对象的一个属性。窗口历史记录对象包含当前会话中访问的 URL 数组
历史 API 是创建可能有用效果的非常强大的工具。例如，我们可以使用它来实现基于历史记录的撤消重做系统。
如何使用 JavaScript History API？
History API 是一个非常简单易用的 API。您只需了解几个方法和一个属性：
- back（） − 此方法导航回历史记录中的上一页。
- forward（） − 此方法向前导航到历史记录中的下一页。
- go（） − 此方法导航到历史记录中的特定页面。您传递给 go（） 方法的数字是您要导航到的页面的相对位置。例如，要导航到历史记录中的上一页，您需要将 -1 传递给 go（） 方法。
- length − 此属性返回历史记录列表的长度。它告诉我们用户访问过的页面数。
语法
以下是使用 history 对象的不同方法和属性的语法 -
// 加载历史记录列表中的上一个URL
history.back();
// 加载历史记录列表中的下一个URL
history.forward();
// 通过页码加载页面
history.go(-2); // 这将转到上一页第2页
history.go(2); // 这将转到下一页
// 获取历史记录列表的长度
const length = history.length;
正在加载历史列表中的上一页
history 对象的 JavaScript history back（） 方法加载 history 列表中的前一个 URL。我们还可以使用 history go（） 方法来加载上一页。这两种方法的区别在于 back（） 方法只加载历史列表中的前一个 URL，但我们可以使用 go（） 方法加载历史列表中任何一个之前的 URL。
示例：使用 back（） 方法加载上一页
在下面的示例中，我们使用了 history back（） 方法来加载用户已经访问过的上一页。
请注意，如果你在历史列表中没有上一页（即，你之前没有访问过任何页面），back（） 方法将不起作用。
我们实现了一个后退按钮，单击该按钮后，我们可以加载之前访问的页面。
<html>
<body>
<p> Click "Load Previous Page" button to load previous visited page </p>
<button onclick="goback()"> Load Previous Page </button>
<p id = "output"> </p>
<script>
function goback() {
history.back();
document.getElementById("output").innerHTML +=
"You will have gone to previous visited page if it exists";
}
</script>
</body>
</html>
示例：使用 go（） 方法加载上一页
在下面的示例中，我们使用了 history go（） 方法从当前网页加载到之前访问的第 2 个页面。
<html>
<body>
<p> Click the below button to load 2nd previous visited page</p>
<button onclick = "moveTo()"> Load 2nd Previous Page </button>
<p id = "output"> </p>
<script>
function moveTo() {
history.go(-2);
document.getElementById("output").innerHTML =
"You will have forwarded to 2nd previous visited page if it exists.";
}
</script>
</body>
</html>
在历史列表中加载下一页
history 对象的 JavaScript history forward（） 方法加载 history 列表中的下一个 URL。我们还可以使用 history go（） 方法来加载下一页。这两种方法的区别在于 forward（） 方法只加载历史列表中的下一个 URL，但我们可以使用 go（） 方法来加载历史列表中的下一个 URL。
示例：使用 forward（） 方法加载下一页
在下面的代码中，单击按钮转到下一个 URL。它用作浏览器的前进按钮。
<html>
<body>
<p> Click "Load Next Page" button to load next visited page</p>
<button onclick = "goForward()"> Load Next Page </button>
<p id = "output"> </p>
<script>
function goForward() {
history.forward();
document.getElementById("output").innerHTML =
"You will have forwarded to next visited page if it exists."
}
</script>
</body>
</html>
示例：使用 go（） 方法加载下一页
在下面的示例中，我们使用 go（） 方法从当前网页移动到前第二页。
<html>
<body>
<p> Click the below button to load next 2nd visited page</p>
<button onclick = "moveTo()"> Load 2nd Next Page </button>
<p id = "output"> </p>
<script>
function moveTo() {
history.go(2);
document.getElementById("output").innerHTML =
"You will have forwarded to 2nd next visited page if it exists.";
}
</script>
</body>
</html>
获取历史列表的长度
我们可以使用 history.length 属性来获取 history 列表的长度。
例试试下面的例子 -
<html>
<body>
<p> Click the below button to get the lenght of history list</p>
<button onclick = "moveTo()"> Get Lenght of History List </button>
<p id = "output"> </p>
<script>
const output = document.getElementById("output");
function moveTo() {
output.innerHTML = history.length;
}
</script>
</body>
</html>
