不刷新網頁修改url連接：history.pushState()和history.replaceState()新增、修改歷史記錄用法介紹

　　最近遇到了在不刷新頁面的狀況下修改瀏覽器url連接的需求，考慮到能夠經過history.pushState()解決。如今將我理解的一些內容分享一下，不對的地方歡迎你們指出。

　　在使用方法前首先須要瞭解它的兼容性，history.pushState()存在必定的兼容性問題，能夠經過 https://caniuse.com/#search=pushState 查看支持的瀏覽器版本。

　　history.pushState(stateObject, title, url);

　　history.pushState()主要是在不刷新瀏覽器的狀況下，建立新的瀏覽記錄並插入瀏覽記錄隊列中。

一、狀態對象（stateObject）—— stateObject是一個JavaScript對象，經過pushState方法能夠將stateObject內容傳遞到新頁面中。

二、標題（title）—— 幾乎沒有瀏覽器支持該參數，可是傳一個空字符串會比較安全。

三、地址（url）—— 新的歷史記錄條目的地址（可選，不指定的話則爲文檔當前URL）。

　　瀏覽器在調用pushState()方法後不會加載該地址；傳入的URL與當前URL應該是同源的，不然，pushState()會拋出異常。

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

　　上面代碼就能夠在不刷新網頁的狀況下，更新url連接了。

　　而後抽空研究了下這兩個新方法，確實能夠解決不少問題

1、使用pushState()方法 能夠控制瀏覽器自帶的返回按鈕

　　有時候咱們想讓用戶點擊瀏覽器返回按鈕時，不返回，或執行其餘操做，這時，就用到history.pushState()方法。

　　history.pushState(data,title,url) ，每執行一次都會增長一條歷史記錄

　　data：要設置的history.state的值，能夠是任意類型的值，可根據此值進行判斷執行想要的操做。

　　好比監聽瀏覽器的前進後退事件：

window.addEventListener("popstate", function() { // 取出 設置好的 history.state 值，作判斷
});

2、history.replaceState() 與pushState()功能相似，除了這點：

　　replaceState()是用來修改當前的歷史記錄(history實體)，而不是建立一個新的歷史記錄，因此，當執行完history.replaceState()後，點擊返回按鈕照樣會返回上一個頁面。  當須要更新一個state對象或者當前history實體時，能夠用replaceState()來實現。

　　用法：當在a頁面使用replaceState()修改了歷史記錄後，跳轉到b頁面，後退到a頁面時，歷史記錄就是修改過的。