JavaScript - history API（历史 API）

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>

打印本页

JavaScript - history API（ 历史 API）

Web history API（ 历史 API）