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);
};