着手于history新特性，解决tab切换无法前进后退问题。

这个问题应该是 ajax + tab 的通病，最近的电商项目，订单部分用的 ajax +tab，由于ajax + tab切换没有产生history，所以造成无法返回。

此贴，也是楼主研究别的博主的技术贴，自己消化过后才放出的帖子，只适用于日常开发，解决日常开发问题。

由于楼主工作中没有前端partner，所遇到的问题只能自己琢磨也没有人交流。所以不足之处还请多谅解！

订单各种状态的数据都是靠ajax不同的参数来获取的所以没有历史记录。

解决方案 ： 每次点击不同状态强行增加history，返回的时候，通过URL或其他传参，就可以还原到Ajax之前的模样。

操作要点:           history.pushState 、 history.replaceState 、 window.onpopstate。

顺便介绍一下 pushState、replaceState  从命名上来看   一个是增加状态、一个是替换状态

history.pushState(data, title, url)

会往历史记录对战顶部添加一条历史记录；data会在onpopupstate事件触发事作为参数传递过去；title作为参数传递过去，但目前浏览器都会忽略，此参数忽略，url为页面地址，缺省是为当前地址；

history.replaceState(data, tltle, url);

更改当前历史记录，参数同上；

window.addEventListener("popstate", function() {
    var state = history.state;
    /*
         来 撸代码
    */
});

history.state 用于存储上两个放大的data；（有人讲浏览器的读写不一样，没有时间深入研究、但谷歌是正常的）

popstate事件：用于监听浏览器的前进与后退，可以和history.state配合使用，history.state做为每次前进或后退的参数，便于我们做出不同的处理；也可以通过每次增加堆栈、修改堆栈的改变的url加入不同的参数来判断 

 ex ：history.pushState({}, "", "myorder.html?" + str);

每次切换不同状态时：增加history

str 作为判断的参数 这个处理是在同页面上添加不同的参数，这段没有用到history.state

在监听到浏览器有前进或后退时  获取状态 再次发出请求 获取改状态时的数据就ok

这里是使用history.state  为便于理解 我把orderStatus 复制给id  实际操作中创建一变量即可；

 

在popstate 触发时我们便可以根据history.state 来获得状态  再次获取数据就ok

这两种操作 就是一个利用history.state来存储状态，一个是修改url获取状态，个人推荐还是通过history.state来存储状态比较好 ,通过改变 url 刷新页面时会有问题,问题没有深入的剖析,中午了 困了 ,有时间在研究。

一个人做公司大小项目，心力不足，大到所有的项目都是独立开发，小到页面修改样式，修改ui，毕竟时间有限，精力有限。开发中遇到过很多有趣的问题，以后多更新一些开发中遇到的问题。

附：最近又开始做小程序了，可能更新的会非常慢，但还是会开发中遇到的问题、解决问题的方式以及新的知识点给更出来。