HTML5 history.pushState()和history.replaceState()新增、修改歷史記錄用法介紹
阿新 • • 發佈：2018-06-25
body popu spa htm 動作 使用 lang scrip null
抽空研究了下這兩個新方法，確實可以解決很多問題
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(
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還存在，我們可以利用這個參數在頁面中執行一些操作，比如列表的選中
可以將系統的api二次封閉提高易用性
HTML5 history.pushState()和history.replaceState()新增、修改歷史記錄用法介紹