HTML5历史状态管理history API-pushState/replaceState与popstate事件

AJAX技术对我们前端产生了巨大影响
可以让我们的页面无刷新操作减少网络请求
但是它也产生了一些问题
不能够使用浏览器的前进与后退
（后退是浏览器非常常用的按钮）
很久很久以前，Gmail借助iframe解决了这个问题
但现在，HTML5提供了超级简单的API

pushState与onpopstate

history.pushState(stateObject, title, url)
包含三个参数
分别是状态对象、新状态标题和可选参数相对URL
第一个参数状态对象应该传入提供页面状态信息的数据
第二个参数还没有浏览器实现
添加也没有什么用，所以可以传入一个空字符串
如果使用了第三个参数，那么执行这个函数后，浏览器地址也会更新
但是不会真的向服务器发送请求

当我们从状态栈中的一个状态跳到另一个状态popstate事件就会触发
（浏览器前后翻页触发，刷新页面不触发）
它的事件对象中有一个state属性存储着当初传递给pushState()的状态对象

下面通过一个小例子来解释一下

<button id="next">下一页</button>
当前页数：<span id="cur">0</span>

var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){
  page&#