一、简介前端
window.history是用来保存用户在一个会话期间的网站访问记录，并提供相应的方法进行追溯。其对应的成员以下：ajax
方法：back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url)跨域
属性：length、state浏览器
事件：window.onpopstate异步
方法说明：性能
back()：回退到上一个访问记录; 在历史记录中后退：window.history.back();网站
forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward();url
go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1); 向前移动一页window.history.go(1);spa
查看历史记录栈中一共有多少个记录点：window.history.length;对象
pushState(stateData, title, url)：在history中建立一个新的访问记录，不能跨域，且不形成页面刷新;
replaceState(stateData, title, url)：修改当前的访问记录，不能跨域，且不形成页面刷新;
另，HTML5新增了能够监听history和hash访问变化的全局方法：
window.onpopstate：当调用history.go()、history.back()、history.forward()时触发；pushState()、replaceState()方法不触发。
window.onhashchange：当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发。触发的状况以下：
a、经过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分;
b、使用不一样history操做方法到带hash的页面;
c、点击连接跳转到锚点。
二、浏览器history的发展
咱们知道在使用location.href、a标签的href[非锚点的方式]等，进行页面访问时，页面会刷新。但随着大前端时代的到来，产生了异步单页来提高性能。咱们再也不但愿每次的跳转都带来页面的刷新，而是但愿这种跳转仅仅引起数据变化，从而改变视图。
此时，产生了HTML5 history API。这些API，是为了解决异步单页的路由问题，使得页面在不刷新的状况下，带来视图的变化，同时变化后的信息能获得准确的传播。
下面来看看一个应用场景的实例：咱们在访问一个新闻列表页，找到一篇感兴趣的新闻，文章的内容经过ajax的方式获取到。咱们以为这篇文章颇有趣，并将其分享给了朋友们。若是url地址没有变化，朋友们访问的将是列表页，而非有趣的文章。而经过HTML5的API，在异步请求ajax的同时，咱们能够改变url地址，朋友们访问的也正是这篇文章。
那么，
让咱们来看看window.history是如何工做的吧～～～
三、浏览器history变化与浏览器的行为
history栈变动图
如图，展现了初始长度为4的history栈，在不一样操做方法下的变化状况，下面对每步进行分析：
step1～step4：均为history的访问方法，获取相应的历史记录中的url;
step5：经过location.href建立一个新的url记录，其将当前url2以后的记录清空，并在其后新增url5;history长度由4变成3;history的每次新增操做，都会将其后记录清空，在其后新增记录。
step6：经过pushState方法建立一个新的url记录，其也是清空、再新增记录;
step8：经过replaceState方法修改一个url记录，其不会产生新记录，而是将当前记录进行修改。
值得注意的是，经过pushState新增或者修改的history记录，被访问时，当前页面不刷新。而locaiton.href生成的记录被访问时，页面将进行刷新。
location.replace() 方法可用一个新文档取代当前文档。
location.replace(newURL)
说明
replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。