Javascript history物件的 history.pushState() 和 history.replaceState() 方法

cvper發表於2018-03-08
JavaScript物件

history.pushState() 和 history.replaceState() 是history物件的兩個新增的方法，

是可以很好的操作歷史記錄的方法；


history.State()

history.State()的作用是向瀏覽器的歷史新增一條記錄，我們來看看如何使用這個方法：

我們建立一個html網頁檔案，在網頁中加入一個button按鈕即可，我們看看顯示效果


我們看到在位址列中顯示了檔案的地址，現在我們不重新整理網頁，也不跳轉到其它地址，

就在原網頁不變的情況下改變位址列中的地址，怎麼做呢？

 <body>
         <button id="abc">test</button>
         <script>
              var abc=document.getElementById("abc");
              abc.οnclick=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.οnclick=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()方法是將當前的歷史記錄給替換掉，傳說中的奪舍重生！

相關文章