移动端点击返回键，页面不刷新解决方案

在移动端项目中遇到了点击浏览器返回键，页面不刷新的问题，通过研究学习，采用了以下的解决方案。问题解决了。

（一）移动端点击返回键，页面不刷新解决方案

移动端浏览器点击返回上一级，页面不刷新的原因之一：返回上一级的页面是从往返缓存bfcache）中获取的,而浏览器保存了DOM和js的状态，再次打开时不触发onload事件，即页面不会重新加载。
可在js代码中增加以下页面强制刷新的代码：
1、判断页面是否存在“往返缓存”；
2、如果存在，重新加载当前页面。

  // 点击浏览器返回按钮，404页面刷新
 window.addEventListener('pageshow', function (event) {
//event.persisted属性为true时，表示当前文档是从往返缓存中获取
  if (event.persisted) location.reload();
 });

pageshow和onload很相似：
“pageshow”：每次浏览网页时触发，事件必须绑在window上；
“onload”：第一次浏览时触发（用于页面从浏览器缓存中获取时，不触发）；

（二）“往返缓存”

"往返缓存"(back-forward cache,简称bfcache),当用户点击前往新页面时，会把当前页面(包括页面数据、DOM、JS状态等)保存在bfcache中；当用户点击后退按钮时，会从bfcache中获取上一级的页面，加快页面的转换速度和减少网络请求时间。

bfcache的出现导致了页面不刷新的问题，如下：
在A页面点击“去完成”时跳转到B页面，完成任务之后在B页面点击回退按钮，退回到A页面。这个时候A页面的“去完成”按钮理应会变成“已完成”，但是因为A页面跳转B页面的时候，A页面的数据（DOM和js状态）存在了bfcache中，所以从B跳转到A页面时，A页面并不会刷新，按钮不会变成“已完成”。

往返缓存_图解.jpg

笔记整理记录