HTML5的popstate、pushState、replaceState如何玩转浏览器历史记录

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40028324/article/details/83268502

一、popstate用来做什么的？
简而言之就是HTML5新增的用来控制浏览器历史记录的api。

二、过去如何操纵浏览器历史记录？
window.history对象，该对象上包含有length和state的两个值，在它的__proto__上继承有back、forward、go等几个功能函数
在popstate之前，我们可以利用back、forward、go对history进行后退和前进操作。
例如：
history.back(); (后退一步，使用history.go(-1)也可实现后退效果)
弊端：只能操作前进后退，但是无法控制前进后要去哪，history.length都只会维持原来的状态

三、popstate的怎么用？
HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。

pushState、replaceState两者用法差不多。

使用方法：

history.pushState(data,title,url);
//其中第一个参数data是给state的值；第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；第三个参数url是你想要去的链接；

replaceState用法类似，例如：history.replaceState("首页","",location.href+ "#news");

两者区别：pushState会改变history.length，而replaceState不改变history.length

 使用场景重现：

1.由于业务逻辑需要：打开我项目页面链接时，如果url中携带了指定参数，初始化进入页面的时候，就显示弹窗。

2.页面中提供了一些其他链接的入口banner

3.这样如果进入页面时携带了参数，点击其中banner时，跳转到其他页面，然后点击宿主的返回按钮，一般是会取之前历史记录里的。这时回到之前页面时，还是会打开弹窗，因为页面链接里还携带着参数

4.解决办法，使用pushState方法，无刷新改变页面url 我只需要这样做：

      let lcthref=location.href.replace(/openMyPrize=true/g,"")
      console.log(lcthref)
      window.history.pushState("","",lcthref)

就可以解决了。