解决内置浏览器返回上⼀页强制刷新问题⽅法
内置浏览器在返回上⼀页⾯，且上⼀页⾯包含AJAX代码时，页⾯就会被强制刷新，极度影响⽤户体验。⽽我们想要的效果是：返回上⼀页⾯时，页⾯还停留在原来的状态，AJAX获取到的数据还在，滚动条也在原来的位置。
BINGO~
通过HTML5的history API + 缓存可以做到这⼀点。
执⾏原理：
1.0、通过history API的 history.pushState或 placeState 保存AJAX状态；
2.0、同时将AJAX获取到的数据缓存起来（可以考虑使⽤H5的localStorage或sessionstorage）；
3.0、当返回到这个页⾯时，先获取窗⼝的history.state，如果不为空，表⽰保存的有状态，我们要做的就是恢复到这个状态；
4.0、读取缓存数据并加载。如果涉及到分页，且是滚动加载的形式，需要将当前页设置为history.state中的页数。
使⽤技术点介绍：
history API：
HTML5 history API只包括2个⽅法：history.pushState()和placeState()，以及1个事件：popstate。
①history.pushState()
第1个参数是状态对象，它可以理解为⼀个拿来存储⾃定义数据的元素。它和同时作为参数的url会关联在⼀起。
第2个参数是标题，是⼀个字符串，⽬前各类浏览器都会忽略它（以后才有可能启⽤，⽤作页⾯标题），所以设置成什么都没关系。⽬前建议设置为空字符串。
第3个参数是URL地址，⼀般会是简单的?page=2这样的参数风格的相对路径，它会⾃动以当前URL为基准。需要注意的是，本参数URL需要和当前页⾯URL同源，否则会抛出错误。
调⽤pushState()⽅法将新⽣成⼀条历史记录，⽅便⽤浏览器的“后退”和“前进”来导航（“后退”可是相当常⽤的按钮）。另外，从URL的同源策略可以看出，HTML5 history API的出发点是很明确的，就是让⽆跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时，站点可以直接加载到对应的状态。
②placeState()
它和history.pushState()⽅法基本相同，区别只有⼀点，placeState()不会新⽣成历史记录，⽽是将当前历史记录替换掉。
③popstate
push的对⽴就是pop，可以猜到这个事件是在浏览器取出历史记录并加载时触发的。但实际上，它的条件是⽐较苛刻的，⼏乎只有点击浏览器的“前进”、“后退”这些导航按钮，或者是由JavaScript调⽤的history.back()等导航⽅法，且切换前后的两条历史记录都属于同⼀个⽹页⽂档，才会触发本事件。
上⾯的“同⼀个⽹页⽂档”请理解为JavaScript环境的document是同⼀个，⽽不是指基础URL（去掉各类参数的）相同。也就是说，只要有重新加载发⽣（⽆论是跳转到⼀个新站点还是继续在本站点），JavaScript全局环境发⽣了变化，popstate事件都不会触发。
popstate事件是设计出来和前⾯的2个⽅法搭配使⽤的。⼀般只有在通过前⾯2个⽅法设置了同⼀站点的多条历史记录，并在其之间导航（前进或后退）时，才会触发这个事件。同时，前⾯2个⽅法所设置的状态对象（第1个参数），也会在这个时候通过事件的event.state返还回来。
以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！
发布评论