HTML5 的 history API

在使用 AJAX 方式更新页面内容后，页面的 URL 并没有改变，因此用浏览器的前进和后退无法切换这些不同的页面状态。这个问题利用 HTML5 的 history API 可以完美地解决。

HTML5 history API 最简单的例子如下：

if (history.pushState) {

    var state = {page: 2 };

    history.pushState(state, "title", location.href + '#2');



    window.onpopstate = function(event) {

        console.log(event.state);

    }

}

其中 pushState 方法可以在历史记录中添加一个访问记录，该方法有三个参数，该记录要保存的状态对象，标题（当前浏览器不会处理这个参数），URL 地址。类似地，我们有 replaceState 方法可以修改当前访问记录。对于用这两个方法添加或者处理的访问记录，当浏览器再次访问时会触发 popstate 事件。

参考资料：
[1] MDN 中文 - DOM - 操纵浏览器的历史记录
[2] Web technology for developers - Web API reference - window.history
[3] MDN 中文 - DOM - window.onpopstate
[4] HTML5 Demo: HTML5 History API
[5] Dive Into HTML5 - Manipulating History for Fun & Profit
[6] MSDN - history object
[7] 修改历史：History 详解 | JS Mix
[8] HTML5 history API介绍 - keakon的涂鸦馆