JavaScript history 对象详解

什么是 history 对象？

history 对象是浏览器的一部分，它存储了用户在浏览器窗口中所访问过的 URL。它提供了一些方法来操作该历史记录，例如前进、后退和重新加载等。当用户点击浏览器的后退或前进按钮时，这些方法就会被触发，并导航到相应的 URL。history 对象是 window 对象的一个属性，在 JavaScript 中可以直接访问。

history 对象的属性和方法

属性

length：当前历史记录中的页面数量。
state：表示当前页面的状态，可以是任何有效的 JavaScript 对象。

方法

back()：返回上一个历史记录。
forward()：前往下一个历史记录。
go()：以参数的形式指定前往历史记录中的指定页面。

history 对象的示例

示例 1：前进和后退按钮

以下是一个简单的 HTML 和 JavaScript 代码示例，用于演示历史记录中的前进和后退按钮：

<!DOCTYPE html>
<html>
<head>
    <title>History Demo</title>
</head>
<body>
    <h1>Let's go back in time!</h1>
    <button onclick="goBack()">Go back</button>
    <button onclick="goForward()">Go forward</button>
</body>
<script type="text/javascript">
    function goBack() {
        window.history.back();
    }
    function goForward() {
        window.history.forward();
    }
</script>
</html>

运行代码，单击“Go back”按钮则返回上一页，单击“Go forward”按钮前往下一页。

示例 2：使用 pushState() 方法

使用 pushState() 方法可以改变 URL 的状态，同时在不重新加载页面的情况下修改浏览器历史记录，并增加一条新的历史记录。

下面的代码演示了如何使用 pushState() 方法，它会在点击按钮时修改 URL 并在不刷新页面的情况下将新的状态添加到历史记录中：

<!DOCTYPE html>
<html>
<head>
    <title>History Demo</title>
</head>
<body>
    <h1>Pushing it to the limit!</h1>
    <button onclick="pushState()">Push state</button>
</body>
<script type="text/javascript">
    function pushState() {
        window.history.pushState({page: "new_page"}, "New Page", "/new_page");
    }
    window.onpopstate = function(event) {
        console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    };
</script>
</html>

运行代码，单击“Push state”按钮后，在浏览器的地址栏中会看到 URL 发生了变化，并在控制台中输出了历史记录状态。点击浏览器的后退按钮会回到以前的页面，控制台输出对应状态。

结论

JavaScript history 对象提供了一个可以跟踪用户访问历史记录的简便方法。利用其包含的属性和方法，我们可以轻松实现让用户回退、前进和任意跳转历史记录的功能。同时，它还提供了 pushState() 方法，允许我们修改浏览器历史记录和 URL 的状态，这就为单页面应用程序（SPA）提供了很大的帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript history 对象详解 - Python技术站