history
h5中history提供了不修改页面内容只修改地址栏的api，pushState(添加浏览历史),replaceState(修改当前浏览历史)，popState事件在用户返回或前进进会被出发触发
history.pushState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
history.replaceState方法跟pushState一样只不过replaceState是修改当前的状态
popState
仅仅调用pushState方法或replaceState方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
此事件可以添加一个回调函数，函数的第一个参数为事件,事件的state属性是pushState和replaceState中传递的第一个参数state
判断浏览器是否支持这些api,并添加一些记录,如下添加三个
if (!!(window.history && history.pushState)) {
// 支持History API
history.pushState('#1', null, '#1');
history.pushState({ a: 1, b: 2 }, null, '#2');
history.pushState('#3', null, '#3');
window.onpopstate = function(event) {
console.log('location: ' + document.location);
console.log(event.state);
};
//另一种添加事件的方法
window.addEventListener('popstate', function(event) {
console.log('location: ' + document.location);
console.log(event.state);
});
}
页面加入上面代码后打开页面地址后面会跟一个 #3，当第一次点返回按钮时会输出如下值，并且页面url变成 #2
如果这个时候再前进则会输出如下，这个时候地址栏里是 #3
也就是说popstate事件发生时event里是和当前url匹配的一些数据