HTML5- history

文章引用于: http://www.cnblogs.com/stephenykk/p/5057022.html

API 实例

HTML5 history API只包括2个方法：history.pushState()和history.replaceState()，以及1个事件：window.onpopstate。
history.pushState(state, title, url)
调用pushState()方法将新生成一条历史记录，方便用浏览器的“后退”和“前进”来导航（“后退”可是相当常用的按钮）。另外，从URL的同源策略可以看出，HTML5 history API的出 发点是很明确的，就是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时，站点可以直接加载到对应的状态

• state，它可以理解为一个拿来存储自定义数据的元素。它和同时作为参数的url会关联在一起。
• title，是一个字符串，目前各类浏览器都会忽略它（以后才有可能启用，用作页面标题），所以设置成什么都没关系。目前建议设置为空字符串。
• url 第3个参数是URL地址，一般会是简单的?page=2这样的参数风格的相对路径，它会自动以当前URL为基准。需要注意的是，本参数URL需要和当前页面URL同源，否则会抛出错误。

history.replaceState()
它和history.pushState()方法基本相同，区别只有一点，history.replaceState()不会新生成历史记录，而是将当前历史记录替换掉。

window.onpopstate
在只有点击浏览器的“前进”、“后退”这些导航按钮，或者是由JavaScript调用的history.back()等导航方法，且切换前后的两条历史记录都属于同一个网页文档，才会触发本事件。

实例

 window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 该干嘛干嘛
    */											
});