不刷新网页修改url链接：history.pushState()和history.replaceState()新增、修改历史记录用法介绍

　　最近遇到了在不刷新页面的情况下修改浏览器url链接的需求，考虑到可以通过history.pushState()解决。现在将我理解的一些内容分享一下，不对的地方欢迎大家指出。

　　在使用方法前首先需要了解它的兼容性，history.pushState()存在一定的兼容性问题，可以通过 https://caniuse.com/#search=pushState 查看支持的浏览器版本。

　　history.pushState(stateObject, title, url);

　　history.pushState()主要是在不刷新浏览器的情况下，创建新的浏览记录并插入浏览记录队列中。

1、状态对象（stateObject）—— stateObject是一个JavaScript对象，通过pushState方法可以将stateObject内容传递到新页面中。

2、标题（title）—— 几乎没有浏览器支持该参数，但是传一个空字符串会比较安全。

3、地址（url）—— 新的历史记录条目的地址（可选，不指定的话则为文档当前URL）。

　　浏览器在调用pushState()方法后不会加载该地址；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。

window.history.replaceState({}, '', `?query=${this.query}`)

　　上面代码就可以在不刷新网页的情况下，更新url链接了。

　　然后抽空研究了下这两个新方法，确实可以解决很多问题

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

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

　　history.pushState(data,title,url) ，每执行一次都会增加一条历史记录

　　data：要设置的history.state的值，可以是任意类型的值，可根据此值进行判断执行想要的操作。

　　比如监听浏览器的前进后退事件：

window.addEventListener("popstate", function() {
    // 取出 设置好的 history.state 值，做判断
});

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

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

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