Javascript history物件的 history.pushState() 和 history.replaceState() 方法
history.pushState() 和 history.replaceState() 是history物件的兩個新增的方法,
是可以很好的操作歷史記錄的方法;
history.State()
history.State()的作用是向瀏覽器的歷史新增一條記錄,我們來看看如何使用這個方法:
我們建立一個html網頁檔案,在網頁中加入一個button按鈕即可,我們看看顯示效果
我們看到在位址列中顯示了檔案的地址,現在我們不重新整理網頁,也不跳轉到其它地址,
就在原網頁不變的情況下改變位址列中的地址,怎麼做呢?
<body>
<button id="abc">test</button>
<script>
var abc=document.getElementById("abc");
abc.onclick=function(){
window.history.pushState(null,null,'?page=1');
}
</script>
</body>
在我們之前的網頁中新增javascript程式碼,也就是上面紅色的部分,使用了pushState()方法;
然後我們開啟這個網頁,開始的時候位址列是不變的,我們點選一下按鈕看看:
網頁本身沒有任何變化,只是位址列發生了變化,實現了無重新整理改變位址列,並且在歷史記錄
中添加了一個新的紀錄;
history.replaceState()
history.replaceState()的作用是替換當前的歷史記錄,我們看看如何使用這個方法:
在上面 history.pushState( ) 方法中,我們第一步建立了一個index.html網頁,
第二步我們使用pushState( )方法增加了一條歷史記錄,這是第二條歷史記錄;
現在我們在上面的基礎上改變一下,使用replaceState() 方法,程式碼:
<body> <button id="abc">test</button> <script> var abc=document.getElementById("abc"); abc.onclick=function(){ window.history.pushState(null,null,'?page=1'); history.replaceState(null, null, '?page=2'); } </script>
我們再次進入網頁,並且點選按鈕,觸發js函式,
這個時候位址列中的地址為:file:///F:/web_pro/pro_p/index.html?page=2
我們使用replaceState()方法將歷史記錄 file:///F:/web_pro/pro_p/index.html?page=1
替換成了:file:///F:/web_pro/pro_p/index.html?page=2 ;
整個過程還是比較清楚的;
總結:pushState()方法是在歷史記錄中增加一條新的記錄;
replaceState()方法是將當前的歷史記錄給替換掉,傳說中的奪舍重生!