浏览器回退到上一页，刷新历史页面，清除缓存的方法

在一些场景中，我们点击浏览器默认的返回上一页按钮，需要刷新页面重新加载数据，比如用户在购物车页面去购买后，当用户在购买后通过返回键回到购物车页面时，我们需要去掉已经购买的商品，只显示剩余未购买的商品在购物车里。或者是一个表单信息填写页，产品说填写保存成功后跳到一个新页面，并且不允许用户修改，那么当用户通过浏览器“后退”按钮返回历史页面时，一般浏览器都会直接读取缓存里的数据，哪怕是设置了页面不缓存，如下：

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

有时候也没有效果，那么当用户返回到上一页时，购物车的商品并没有重新加载，表单信息页页依然可以编辑保存，这样的操作是不允许的，所以当我们在回退到上一页时，我们可以通过刷新页面，达到清空缓存的效果。将以下js代码放到页面<script>标签里即可：

 if(window.name != "noReload"){
    window.name = "noReload";
    location.reload();
} else {
    window.name = "";
}

当回退到历史页面时，页面依然会从上往下渲染执行，执行到这段js那么会去判断当前页面是否需要刷新，window.name是window对象的一个全局属性，类似于window.alert()，这里相当于用window.name做了一个标识，如果是给定的值"noReload"，那么就重置window.name，如果window.name被重置了，那么又给window.name赋值“noReload”并刷新页面，这样其他的页面也可以通过window.name属性来判断是否要刷新当前页面，因为window是一个全局属性，window.name的作用域是跨页面的，与 localStorage的作用域相同，都用于本地存储。

这种写法也有缺点，就是每次进入页面无论是回退进去还是正常访问进去都会刷新一次页面，那么我们可以在正常进入的时候给window.name赋值"noReload"，这样进入页面便不会做无用的刷新了。

以上情景是同步请求才试用，也就是服务器直接返回数据到视图（如jsp）里，因为这个时候回退按钮并不会重新请求服务器，所以需要清缓存，如果购物车页商品列表是通过异步请求加载的数据，那么不存在缓存的问题，浏览器执行到发送请求的js处会重新发出请求，页面也会重新渲染。

移动端微信浏览器回退到上一页清空缓存的方法，亲测有效：

if (document.addEventListener) {
        /*event.persisted 判断浏览器是否有缓存, 有为true, 没有为false*/
        window.addEventListener('pageshow', function (event) {
            if (event.persisted || window.performance && window.performance.navigation.type == 2){
                location.reload();
            }
        },false);
 }

onpageshow 事件在用户浏览网页时触发。
类似于 onload事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发，此外还有pagehide在不显示的时候触发。
关于onpageshow的更多内容参考：https://www.cnblogs.com/wangmaoling/p/8022561.html

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。