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

时间 2019-11-08

原文原文链接

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

是能够很好的操做历史记录的方法；html

history.State()java

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

咱们建立一个html网页文件，在网页中加入一个button按钮便可，咱们看看显示效果浏览器

咱们看到在地址栏中显示了文件的地址，如今咱们不刷新网页，也不跳转到其它地址，函数

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

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

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

网页自己没有任何变化，只是地址栏发生了变化，实现了无刷新改变地址栏，而且在历史记录对象

中添加了一个新的纪录；

history.replaceState()

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

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

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

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

<body>

<button id="abc">test</button>

<script>

var abc=document.getElementById("abc");

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