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

最新推荐文章于 2024-04-25 00:32:22 发布

cvper

最新推荐文章于 2024-04-25 00:32:22 发布

阅读量1.5w

点赞数 1

分类专栏： JavaScript 文章标签： javascript history api pushState() replacestate

本文链接：https://blog.csdn.net/cvper/article/details/79477116

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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

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

history.State()

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

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

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

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

 <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（）方法；

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

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

中添加了一个新的纪录；

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()方法是将当前的历史记录给替换掉，传说中的夺舍重生！

cvper

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Javascript history对象的 history.pushState() 和 history.replaceState() 方法

history.pushState() 和 history.replaceState() 是history对象的两个新增的方法，是可以很好的操作历史记录的方法；history.State()history.State()的作用是向浏览器的历史添加一条记录，我们来看看如何使用这个方法：我们创建一个html网页文件，在网页中加入一个button按钮即可，我们看看显示效果我们看到在地址栏中显示了文件的地...
复制链接

扫一扫