Html5 History API解析

浏览器前进与回退操作

在传统的浏览器中我们只能通过调用window.history对象的 forward() 、 back() 或 go(number|url) 方法来进行页面的前进、回退或跳转到某一页面。

而Ajax技术出现出现后我们常常用来实现页面无刷新的局部渲染效果，但却无法对无刷新的页面进行前进和后退的操作。

显然，HTML 5标准制定者也考虑到这一点，于是在HTML 5中为history对象新增了 pushState() 、 replaceState() 接口以及state属性

state属性

state属性的值为对象（默认值为null），该值由用户通过pushState()方法传入，用于记录与改条历史记录相关的页面数据信息

pushState(state, title, url)

pushState()方法包含三个参数：

• state： 用户为该条历史记录写入的数据对象来存储页面相关数据信息
• title：页面标题
• url：页面url

在HTML 5中，我们使用history.pushState()会往history中写入一条历史记录，history.length的值也会+1，history.state被传入的state对象覆盖。

replaceState(state, title, url)

replaceState()方法的三个参数和pushState()相同，但replaceState()用于修改当前页的历史记录。

如何使用state对象？

HTML5除了带给我们以上三个新增的接口以外，还允许浏览器在window上监听popState事件，每当对页面进行前进或后退的操作时，浏览器会从历史记录中取出state对象并通过参数传入popState事件的回调函数中：

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 使用state做点事情
    */
});

这部分的API比较少，也没什么好讲的，权当做个记录，END