Html5 history API

        在html5之前，浏览器的历史记录是不能被操作的，开发者只能调用history对象的几种方法来实现简单的跳转，比如back、go、forward等等。然而，历史总是会被新生事物代替的，html5来了，这一切都将会得到改变。大家在浏览Facebook的相册时有没有发现，页面局部刷新的同时地址栏的地址也改变了，而且不是hash的方式。它使用的就是HTML5 history新增的几个API，作为window的一个全局变量，在HTML4的时代history已不是什么新鲜的事物了。我们经常使用的就有 history.back()以及history.go() 。

1. HTML4时代的history API

A) history.length：当前历史列表中的历史记录数（我大概测了下，IE6+是从0开始的，其他的是从1开始的，若有误请反馈哈，^_^）； 
B) history.go(n)：前进或后退n条记录，当n=0或空时会刷新当前页； 
C) history.back()：后退一步； 
D) history.forward()：前进一步;

2. HTML5新增的API(IE9以下不支持)

A) history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会忽略此参数；url为页面地址，可选，缺省为当前页地址； 
B) history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上； 
C) history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样； 
D) window.onpopstate：响应pushState或replaceState的调用；

        有 了这几个新的API，针对支持的浏览器，我们可以构建用户体验更好的应用了。就像刚提到的Facebook相册，虽然是AJAX的方式，但用户可以直接复 制页面地址分享给好友，好友打开看到的就是AJAX加载的数据，做到了书签化。当然这里面需要做的工作远不是说的这么简单。

3. 浏览器的兼容性&检测

        在HTML5支持不一的时代，新的API总会存在或这或那的兼容性问题。因此我们有必要了解新接口在不同浏览器下的兼容性。

        A) 如何检测浏览器是否支持History API？

        function supports_history_api() { return !!(window.history && history.pushState); }

 
        B) 如何检测history.state的兼容性呢？我尝试赋值history.state=1，但history.state在不同浏览器下的读写权限不一样，所以我们换种方式：

        var originalHistoryState = history.state; // 保存原有的历史信息 history.replaceState(1, null); // 替换当前历史信息 var stateSupport         = history.state == 1; // 是否存储到刚设置的历史信息 history.replaceState(originalHistoryState, null); // 恢复原来的历史信息