Javascript history对象的 history.pushState() 和 history.replaceState() 方法

悠悠 2022-05-30 07:43 243阅读 0赞

history.pushState() 和 history.replaceState() 是history对象的两个新增的方法，

是可以很好的操作历史记录的方法；

history.State()

history.State()的作用是向浏览器的历史添加一条记录，我们来看看如何使用这个方法：

我们创建一个html网页文件，在网页中加入一个button按钮即可，我们看看显示效果

![70][]

我们看到在地址栏中显示了文件的地址，现在我们不刷新网页，也不跳转到其它地址，

就在原网页不变的情况下改变地址栏中的地址，怎么做呢？

<body>
             <button id="abc">test</button>
             <script> var abc=document.getElementById("abc"); abc.οnclick=function(){ window.history.pushState(null,null,'?page=1'); } </script>
         </body>

在我们之前的网页中添加javascript代码，也就是上面红色的部分，使用了pushState（）方法；

然后我们打开这个网页，开始的时候地址栏是不变的，我们点击一下按钮看看：

![70 1][]

网页本身没有任何变化，只是地址栏发生了变化，实现了无刷新改变地址栏，并且在历史记录

中添加了一个新的纪录；

history.replaceState()

history.replaceState()的作用是替换当前的历史记录，我们看看如何使用这个方法：

在上面 history.pushState( ) 方法中，我们第一步创建了一个index.html网页，

第二步我们使用pushState( )方法增加了一条历史记录，这是第二条历史记录；

现在我们在上面的基础上改变一下，使用replaceState() 方法，代码：

<body>
             <button id="abc">test</button>
             <script>
                  var abc=document.getElementById("abc");
                  abc.οnclick=function(){
                      window.history.pushState(null,null,'?page=1');
                      history.replaceState(null, null, '?page=2');
                  }
             </script>

我们再次进入网页，并且点击按钮，触发js函数，

这个时候地址栏中的地址为：file:///F:/web\_pro/pro\_p/index.html?page=2

我们使用replaceState（）方法将历史记录 file:///F:/web\_pro/pro\_p/index.html?page=1

替换成了：file:///F:/web\_pro/pro\_p/index.html?page=2 ；

整个过程还是比较清楚的；

总结：pushState()方法是在历史记录中增加一条新的记录；

replaceState()方法是将当前的历史记录给替换掉，传说中的夺舍重生！

[70]: /images/20220530/ea97a645076a47818a7dd2f9570ef37c.png
[70 1]: /images/20220530/0b6e34a3ce7c4aa49ae93ad528241a21.png

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript history 对象详解

`history`对象是JavaScript的一个内置对象，它允许网页脚本访问和操作浏览器的历史记录。尽管出于安全和隐私原因，它的功能相对有限，但仍然可以用来实现前进、后...

╰+哭是因爲堅強的太久メ/ 2024年05月28日 10:13/ 0 赞/ 40 阅读

相关关于JavaScript history 对象详解

本文主要介绍了JavaScript history 对象详解，history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性，所

灰太狼/ 2024年03月23日 18:58/ 0 赞/ 18 阅读

相关 JavaScript(History对象)

History对象：有关客户访问过的URL的信息。 <table style="width:500px;"> <tbody> <tr> <td styl

桃扇骨/ 2023年10月07日 19:59/ 0 赞/ 8 阅读

相关 location对象和history对象

1. location对象是最有用的BOM对象之一，提供了与当前窗口加载的文档有关的信息，以及一些导航功能，它既是window对象属性，又是document的属性。

迈不过友情╰/ 2023年01月01日 13:57/ 0 赞/ 109 阅读

相关 History对象

window对象的history属性引用的是该窗口的History对象，该对象的属性与方法如下[![未命名][30145410-2555e2c3e74c4fc7a78cbf39

你的名字/ 2022年08月09日 00:57/ 0 赞/ 130 阅读

相关 JavaScript中的数组对象属性和方法！

日常代码中经常会对代码进行一些操作，复制、排序、查找、遍历等等，一些数组的方法总是记不住，所以写篇日记总结一下。 1. 数组的创建与赋值创建一个数组，有三种方法。

秒速五厘米/ 2022年06月12日 14:24/ 0 赞/ 277 阅读

相关 javascript中history.go()和History.back()的区别

转自：[http://www.mikebai.com/Article/2009-11/757.html][http_www.mikebai.com_Article_2009-1

川长思鸟来/ 2022年06月12日 01:28/ 0 赞/ 126 阅读

相关浏览器history对象

“玲珑骰子安红豆，入骨相思知不知” history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window对象的属性，因此每个浏览器

雨点打透心脏的1/2处/ 2022年06月09日 10:55/ 0 赞/ 164 阅读

相关 BOM ->History对象

History对象 History 对象包含用户（在浏览器窗口中）访问过的 URL(浏览历史)。History 对象是 window 对象的一部分，可通过 window.

痛定思痛。/ 2022年06月07日 07:28/ 0 赞/ 195 阅读

相关 Javascript history对象的 history.pushState() 和 history.replaceState() 方法

history.pushState() 和 history.replaceState() 是history对象的两个新增的方法，是可以很好的操作历史记录的方法；

悠悠/ 2022年05月30日 07:43/ 0 赞/ 244 阅读