HTML5（五）：History API

作用：可以在不刷新页面的情况下动态的修改地址栏中的URL地址，动态的修改页面上所显示地资源。

window.history 的方法和属性

方法： back() forward() go()
属性： length
用 go() 方法载入到会话历史中的某一特定页面， 通过与当前页面相对位置来标志 (当前页面的相对位置标志为0).
向后移动一个页面 (等同于调用 back()):

window.history.go(-1);
向前移动一个页面, 等同于调用了 forward():

window.history.go(1);
类似地，你可以传递参数值2并向前移动2个页面，等等。

//返回
window.history.back()
window.history.go(-1)
//向前跳转
window.history.foward()
window.history.go(1)
//历史记录中页面总数
history.length

HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。

history.pushState(state,title,url): 添加一条历史记录，不刷新页面

state: 一个于指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中，如果不需要这个对象，填null
title: 新页面的标题，但是大多数浏览器都会忽略这个值，因此 这里可以填入 null
url: 新网址，必须是同一个域名
history.pushState(null, null,'./demo.html')
缺点： 就是浏览器在转跳的时候，不会检查 demo.html 是否存在

应用--添加 hash 值，页面只局部加载
history.pushState(null, null,'#one')

replaceState替换当前的历史记录，不刷新页面

history.replaceState(state,title,url) 替换当前历史记录，不刷新页面
history.replaceState(null, null,'?one')

事件

popstate 事件：历史记录发生改变时触发，调用 history.pushState() 或者 history.replaceState() 不会触发popstate()事件
history.state：返回当前页面状态参数，此参数一般由history.pushState(state,title,URL);以及history.replaceState(state,title,URL);附带的state值
hashchange事件: 当页面hash 值改变的时候，常用于构建单页面的应用