HTML5 history.pushState()和history.replaceState()新增、修改历史记录用法介绍

最新推荐文章于 2025-09-13 17:54:33 发布

转载最新推荐文章于 2025-09-13 17:54:33 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/drothyChild/article/details/78849852

文章标签：

#HTML5

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解如何使用HTML5提供的history API，包括pushState和replaceState方法，以控制浏览器的前进后退行为。通过实例演示如何增加历史记录和修改当前历史记录，以及如何监听浏览器的前进后退事件。

部署运行你感兴趣的模型镜像

文章目录

传统的方法

浏览器窗口有一个history对象，用来保存浏览历史。如果当前窗口先后访问了三个网址，那么history对象就包括三项，history.length属性等于3。

history对象提供了一系列方法，允许在浏览历史之间移动。

back()：移动到上一个访问页面，等同于浏览器的后退键。
forward()：移动到下一个访问页面，等同于浏览器的前进键。
go()：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。

如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是默默的失败。

history.go(0)相当于刷新当前页面。

常见的“返回上一页”链接，代码如下。

document.getElementById('backLink').onclick = function () {

  window.history.back();

}

注意，返回上一页时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

pushState()

使用pushState()方法可以控制浏览器自带的返回按钮:

有时候我们想让用户点击浏览器返回按钮时，不返回，或执行其他操作，这时，就用到history.pushState()方法

history.pushState(data,title,url) //每执行一次都会增加一条历史记录，浏览器在返回时，就不会返回前一个页面了，
- data：要设置的history.state的值，可以是任意类型的值，可根据此值进行判断执行想要的操作。
- title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替。
- url：地址栏的值，若不需要可用空来代替。
- 监听浏览器的前进后退事件：
```
   window.addEventListener("popstate", function() {
       // 取出 设置好的 history.state 值，做判断

   });
```

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button class="btn" onclick="btnFun();">点击新增一条历史记录</button>
    </div>
    <script>
        console.log('增加历史记录前 state的值：',history.state); // null
        function btnFun() {//点击事件
            // 增加一个历史记录
            history.pushState('a',null,'2.html?b=1');
            console.log('增加历史记录后 state的值：',history.state); // a
        };
        window.addEventListener('popstate',function() {
            var state = history.state;//取出state值
            //注意：在此处时（点击后退按钮时），state的值已经为null
            // （因为返回时历史记录会被删除，浏览器动作）
            console.log('点击后退按钮后 state的值：',state); // null
            //判断，想要执行的操作

        });
    </script>
</body>
</html>

history.replaceState()

history.replaceState() 与pushState()功能类似，除了这点：

replaceState()是用来修改当前的历史记录(history实体)，而不是创建一个新的历史记录，所以，当执行完history.replaceState()后，点击返回按钮照样会返回上一个一面。当需要更新一个state对象或者当前history实体时，可以用replaceState()来实现。

用法：当在a页面使用replaceState()修改了历史记录后，跳转到b页面，后退到a页面时，历史记录就是修改过的。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button class="btn" onclick="btnFun();">点击修改本页历史记录</button>
    </div>
    <br/>
    <div>
        <a href="b.html">点击跳转到b页面</a>
    </div>
    <script>

        function btnFun() {//点击事件
            history.replaceState('a',null,'a.html?a=1');
            console.log('修改历史记录后 state的值：',history.state); // a
        };
    </script>
</body>
</html>

点击跳转到b页面后，执行返回操作

回到a页面，url中?a=1还存在，我们可以利用这个参数在页面中执行一些操作，比如列表的选中

您可能感兴趣的与本文相关的镜像