苹果微信html页面缓存,Ios中微信页面返回上一页去除缓存几种常见思路

前言

这篇文章主要讲解决思路，不对各种概念进行过多讲解。

问题描述

开发微信H5页面的时候，在Ios微信内置浏览器中点击返回按钮返回上一页时，上一页面不会被刷新。

在浏览器缓存机制中，在返回上一页的操作中， html/js/css/接口等动静态资源不会重新请求，但是js会重新加载。但在Ios微信页面中js也会保存上一页面最后执行的状态，不会重新执行js。使用这种模式缓存机制可以加快渲染速度，但是部分数据需要经常展示和编辑的情况下回导致不同步。比如“详情页”跳转到“编辑页”，在“编辑页”中修改数据后返回到详情页中，“详情页”数据展示并未进行同步修改。

产生原因

这里提到一个概念，浏览器前进/后退缓存，(Backward/Forward Cache，BF Cache)，当然也有人叫disk Cache。BF Cache 是一种浏览器优化，html标准并未指定其如何进行缓存，因此缓存行为是各浏览器实现不尽相同。由于不是Http缓存，所以通过头文件缓存设置no-cache是无效的。当然也不能以Http缓存机制来理解BF Cache。

解决思路

从网上看了几种比较常见的解决思路，下面简单讲解。

设置浏览历史当前记录

history.replaceState方法的参数与pushState方法一模一样，区别是它修改浏览历史中当前纪录。

var href = location.href;

var time = new Date().getTime();

href += href.indexOf('?') > -1 ? ('&time='&