BINGO~

通过HTML5的history API+缓存可以做到这一点。

实行事理:

html5页面回退不刷新页面解决微信内置阅读器返回上一页强迫刷新问题办法 Angular

1.0、通过history API的 history.pushState或 history.replaceState 保存AJAX状态;

2.0、同时将AJAX获取到的数据缓存起来(可以考虑利用H5的localStorage或sessionstorage);

3.0、当返回到这个页面时,先获取窗口的history.state,如果不为空,表示保存的有状态,我们要做的便是规复到这个状态;

4.0、读取缓存数据并加载。
如果涉及到分页,且是滚动加载的形式,须要将当前页设置为history.state中的页数。

利用技能点先容:

history API:

HTML5 history API只包括2个方法:history.pushStatehistory.replaceState,以及1个事宜:window.onpopstate

①history.pushState

它的完备体是 history.pushState(stateObject, title, url),包括三个参数

第1个参数是状态工具,它可以理解为一个拿来存储自定义数据的元素。
它和同时作为参数的url会关联在一起。

第2个参数是标题,是一个字符串,目前各种浏览器都会忽略它(往后才有可能启用,用作页面标题),以是设置成什么都没紧要。
目前建议设置为空字符串。

第3个参数是URL地址,一样平常会是大略的?page=2这样的参数风格的相对路径,它会自动以当前URL为基准。
须要把稳的是,本参数URL须要和当前页面URL同源,否则会抛出错误。

调用pushState方法将新天生一条历史记录,方便用浏览器的“退却撤退”和“提高”来导航(“退却撤退”可是相称常用的按钮)。
其余,从URL的同源策略可以看出,HTML5 history API的出发点是很明确的,便是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。
当通过历史记录重新加载站点时,站点可以直接加载到对应的状态。

②history.replaceState

它和history.pushState方法基本相同,差异只有一点,history.replaceState不会新天生历史记录,而是将当前历史记录更换掉。

③window.onpopstate

push的对立便是pop,可以猜到这个事宜是在浏览器取出历史记录并加载时触发的。
但实际上,它的条件是比较苛刻的,险些只有点击浏览器的“提高”、“退却撤退”这些导航按钮,或者是由JavaScript调用的history.back等导航方法,且切换前后的两条历史记录都属于同一个网页文档,才会触发本事件。

上面的“同一个网页文档”请理解为JavaScript环境的document是同一个,而不是指根本URL(去掉各种参数的)相同。
也便是说,只要有重新加载发生(无论是跳转到一个新站点还是连续在本站点),JavaScript全局环境发生了变革,popstate事宜都不会触发。

popstate事宜是设计出来和前面的2个方法搭配利用的。
一样平常只有在通过前面2个方法设置了同一站点的多条历史记录,并在其之间导航(提高或退却撤退)时,才会触发这个事宜。
同时,前面2个方法所设置的状态工具(第1个参数),也会在这个时候通过事宜的event.state返还回来。