[TOC]
* * * * *
*
### 一. 以前的 window.history
~~~
history对象提供了一系列方法，允许在浏览历史之间移动。
back()：移动到上一个访问页面，等同于浏览器的后退键；
forward()：移动到下一个访问页面，等同于浏览器的前进键；
go()：接受一个整数作为参数，移动到该整数指定的页面，
比如go(1)相当于forward()，go(-1)相当于back()；
go(0) 会刷新页面。
~~~
### 二. H5中新增的方法
> H5为 `history` 对象添加了两个新方法，`history.pushState()` 和 `history.replaceState()` ，用来在浏览历史中添加和修改记录。
为了程序的健壮，我们需要判断浏览器是否真有这么个特性
~~~
if (!!(window.history && history.pushState)){
// 支持History API
}
else {
// 不支持
}
~~~
>[info] 语法：
~~~
history.pushState() 方法接受三个参数：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null;
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null;
url：新的网址，必须与当前页面处在同一个域（跨域则报错）。浏览器的地址栏将显示这个网址。
~~~
>[info] 测试：用node起静态服务，提供HTML页面
:-: 
执行下面三种之一效果是一样的，并且每次都是添加了新纪录在 history 中，可见页面内容不变，即没有向服务器在去请求新页面，而只是改变了地址栏。
:-: 
:-: 
访问 `history.length` 可以得到历史记录的个数。
我们注册监听事件
~~~
window.addEventListener('popstate', function(event) {
console.log(event);
});
或者：
window.onpopstate = function (event) {
console.log(event);
};
~~~
>[danger] 这个事件的触发机制是：当我们在点击浏览器的返回和倒退，或者用js执行 返回，倒退功能时候触发。
还有个参数相同的功能，替换当前的历史 `history.replaceState`
