抽空研究了下這兩個新方法，確實可以解決很多問題
1、使用pushState()方法 可以控制瀏覽器自帶的返回按鈕:
有時候我們想讓用戶點擊瀏覽器返回按鈕時，不返回，或執行其他操作，這時，就用到history.pushState()方法
講解：
history.pushState(data,title,url) //每執行一次都會增加一條歷史記錄，瀏覽器在返回時，就不會返回前一個頁面了，
data：要設置的history.state的值，可以是任意類型的值，可根據此值進行判斷執行想要的操作。
title：現在大多數瀏覽器不支持或者忽略這個參數，最好用null代替。
url：地址欄的值，若不需要可用空來代替。
// 監聽瀏覽器的前進后退事件：
window.addEventListener("popstate", function() { // 取出 設置好的 history.state 值，做判斷 });
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button class="btn" onclick="btnFun();">點擊新增一條歷史記錄</button>
</div>
<script>
console.log('增加歷史記錄前 state的值：',history.state); // null
function btnFun() {//點擊事件
// 增加一個歷史記錄
history.pushState('a',null,'2.html?b=1');
console.log('增加歷史記錄后 state的值：',history.state); // a
};
window.addEventListener('popstate',function() {
var state = history.state;//取出state值
//注意：在此處時（點擊后退按鈕時），state的值已經為null
// （因為返回時歷史記錄會被刪除，瀏覽器動作）
console.log('點擊后退按鈕后 state的值：',state); // null
//判斷，想要執行的操作
});
</script>
</body>
</html>
2、history.replaceState() 與pushState()功能類似，除了這點：
replaceState()是用來修改當前的歷史記錄(history實體)，而不是創建一個新的歷史記錄，所以，當執行完history.replaceState()后，點擊返回按鈕照樣會返回上一個一面。 當需要更新一個state對象或者當前history實體時，可以用replaceState()來實現。
用法：當在a頁面使用replaceState()修改了歷史記錄后，跳轉到b頁面，后退到a頁面時，歷史記錄就是修改過的。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button class="btn" onclick="btnFun();">點擊修改本頁歷史記錄</button>
</div>
<br/>
<div>
<a href="b.html">點擊跳轉到b頁面</a>
</div>
<script>
function btnFun() {//點擊事件
history.replaceState('a',null,'a.html?a=1');
console.log('修改歷史記錄后 state的值：',history.state); // a
};
</script>
</body>
</html>
點擊跳轉到b頁面后 ，執行返回操作
回到a頁面，url中?a=1還存在，我們可以利用這個參數在頁面中執行一些操作，比如列表的選中