说说如何使用 HTML5 对浏览器的历史状态进行管理

现代的 Web 应用，几乎都是 AJAX 的局部刷新，所以导致浏览器的“后退”和“前进”失去了意义。在 HTML5 中可以通过更新 history 对象来管理这些历史状态。

首先通过 haschange 事件，可以获知 URL 的参数发生了什么变化。然后通过状态管理 API，可以在不加载新页面的情况下改变浏览器的 URL。history.pushState() 方法接收 3 个参数：状态对象、新状态的标题和可选的相对 URL：

history.pushState({name:"deniro"},"deniro's page","deniro.html");

这个方法执行后，新的状态会载入保存历史状态的栈中，这是的浏览器地址也会变成新的相对 URL（不会向服务器发送请求）。第二个参数目前还没有浏览器实现，所以可以直接传入一个空字符串。而第一个参数应该尽可能详细地提供初始化页面状态所需的信息！

pushState() 创建了新的历史状态，所以浏览器的“后退”按钮现在就可以使用咯O(∩_∩)O~，按下“后退”按钮，会触发 window 对象的 popstate 事件。它有一个 state 属性，它的值就是我们之前传递给 pushState() 方法的第一个参数：

EventUtil.addHandler(window, "popstate",function(event){
    var state = event.state;
    if (state){
        ...
    }
}

得到这个状态信息后，必须把页面重置为状态信息所表示的当时的状态。注意：浏览器加载的第一个页面没有状态，所以如果在第一个页面中点击“后退”按钮后，event.state 为 null。

可以调用 replaceState() 更新当前的状态，传入的参数与 pushState() 的前两个参数相同。这个方法不会再历史状态栈中新增状态，它只会更新当前的状态：

history.replaceState({name:"lily"},"lily's page");

支持 HTML5 历史状态管理的浏览器有这些：Firefox 4+、Safari 5+、Opera 11.5+ 和 Chrome。

---

注意： Safari 和 Chrome 中，传递给 pushState() 和 replaceState() 的状态对象不能包含 DOM 元素，只有 Firefox 支持在状态对象中包含 DOM 元素！Opera 还支持 history.state 属性，它会返回当前状态的状态对象。

使用 pushState() 创建的每一个“假”的 URL，在服务器中都有一个实际存在的 URL与之对应，否则用户如果点击了“刷新”按钮，就会导致 404 错误！切记，切记 O(∩_∩)O~

---