浏览器的历史记录
Nov 7, 2016前言
Ajax使得页面实现了无刷新更新内容，但是带来了一个问题，页面发生改变但是不能前进后退。因为ajax请求页面的内容是改变了，但是浏览器的url保持原来的，进而无法前进后退。
history对象
浏览器的window对象的history对象提供了访问和操纵历史记录的能力。作用于SPA。
History的方法：back()、forward()、go(num)、pushState()、replaceState()
属性：state、length
popstate事件
历史记录栈
浏览器有一个数据结构用来存储网页的历史记录，称之为历史记录栈。它是栈的一个应用。浏览器对历史记录栈的存储总数有限制，谷歌和火狐都是长度为50。当历史记录栈存储的量超过这个限制后，历史记录得存储就会采用滚动的方式存储，也就是新的记录会压入到栈的顶部，最底部的记录会从栈的底部移除出去。
详细介绍history对象
1）前进与后退
Window.history.forward() //等同于浏览器的工具栏点击前进按钮
Window.history.back() //等同于浏览器的工具栏点击返回按钮
2）移动到指定的历史记录点
Window.history.go(n); //n为负数是后退，正数是前进，0是当前页面
3）Length属性值，了解历史记录栈中一共有多少页
4）读取当前状态
History.state直接读取当前历史记录条目的状态
5） pushState() —-HTML5新增
pushSate(stata,title,url)：添加和修改历史记录条目
state： 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。
title ： FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
url ： 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。
pushState永远不会触发hashchange事件，即使新地址只变更了hash.
pushState将当前url和history.state加入到history中，并用新的state和url替换当前，不会造成页面刷新，它带来的地址栏的改变不会出发hash跳转效果，只是将这个地址添加到历史记录中。
6）修改历史记录条目
history.replaceState(state, title, url)：用新的state和URL替换当前。不会造成页面刷新。
replaceState()：修改浏览器当前历史记录条目。
不同于pushState,replaceState()会修改当前历史记录条目而非创建新的条目。
7）popstate事件
每当激活的历史纪录发生变化时，都会触发popstate事件。如果被激活的历史纪录条目是由pushState所创建，或是被replaceState方法影响到，popstate事件的状态属性将包含历史纪录的状态对象的一个拷贝。
前进/后退触发popstate事件。
8）代码阅读
代码：
history.pushState(“”,””,”?name=1”);
history.pushState(“”,””,”?name=2”);
history.pushState(“”,””,”?name=3”);
history.pushState(“”,””,”?name=4”); //代码执行到此处历史记录栈的情况如图history_1
history.replaceState(“”,””,”?name=5”);
history.back();
history.go(1);
history.go(-2);
history.pushState(“”,””,”?name=6”);
history.replaceState(“”,””,”?name=7”);