H5筆記2-H5對History的新操作

在H5出生以前，我們可以通過window.history訪問瀏覽器的歷史記錄信息。

• 後退：window.history.back();
• 前進：window.history.forward();
• 後退、前進指定的步數window.history.go(n); n > 0爲前進，n < 0爲後退；
• 獲得上一個瀏覽歷史的URL : document.referrer;不是所有的用戶代理（瀏覽器）都會設置這個變量。

在H5來到這個紛擾的世界後，它還帶來了2種對History的新操作，history.pushState()和history.replaceState()這兩個方法，他們分別允許添加和修改history實體。同時，這些方法會和window.onpostate事件一起工作，window.onpostate用來捕獲監聽歷史記錄改變事件。

• history.pushState(state,title,url)往瀏覽器歷史記錄頂端添加一條歷史記錄。
  state：該條歷史記錄的state對象，用來傳遞參數；json對象格式；可以爲空；
  title：該條歷史記錄的標題，可以爲空；
  url : 該條歷史記錄的URL.不可以爲空；

• history.replaceState(state,title,url)修改當前URL。
  參數說明同pushState();

• window.onpopstate 用來監聽history的改變事件。

下面舉一個具體的例子。有一個註冊頁面–》在註冊頁面填寫完密碼等信息–》點擊“註冊協議”超鏈接進入註冊協議頁面–》點擊瀏覽器後退回到註冊頁面，發現密碼框被清空了。
用replaceState解決這個問題如下：

 //註冊頁面跳轉至註冊協議頁面時，修改當前歷史記錄，保存用戶填寫的密碼信息到當前歷史記錄
function toRegisterPorocl(){
    var pas = $("#password").val();
    var pas2 = $("#password_confirm").val();
    if(pas != "" || pas2 != ""){
        history.replaceState({password:pas,password2:pas2},"",ctx + "/pub/toRegister.htm");
    }
    window.location.href = ctx + "/pub/toRegisterProtocol.htm";
}


//註冊協議頁面點擊後退：
window.history.back();


//註冊頁面添加監聽
window.onpopstate = function(event) {  
  var pas = event.state.password;
  var pas2 = event.state.password2;
  $("#password").val(pas);
  $("#password_confirm").val(pas2);
};