HTML5 history历史记录的几个关键词

Mark一下，省的忘了而已

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
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的调用；

 

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

 

浏览器兼容性表：

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari

replaceState, pushState	5	4.0 (2.0)	10	11.50	5.0
history.state	18	4.0 (2.0)	10	11.50	6.0

 

如何检测浏览器是否支持History API？
function supports_history_api() { return !!(window.history && history.pushState); }

 

如何检测history.state的兼容性呢？我尝试赋值history.state=1，但history.state在不同浏览器下的读写权限不一样，所以我们换种方式：
var originalHistoryState = history.state; // 保存原有的历史信息

history.replaceState(1, null); // 替换当前历史信息

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