美文网首页前端笔记让前端飞网页前端后台技巧(CSS+HTML)
浏览器回退到上一页,刷新历史页面,清除缓存的方法

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

作者: 菜菜___ | 来源:发表于2019-01-07 13:18 被阅读12次

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

<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后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

相关文章

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

    在一些场景中,我们点击浏览器默认的返回上一页按钮,需要刷新页面重新加载数据,比如用户在购物车页面去购买后,当用户在...

  • Webview 踩坑之setUserAgentString

    最近前端提出个webview问题,网页的某个window对象在新打开的页面就会丢失,网页回退到上一页面时老是会刷新...

  • location 对象

    (1)、刷新页面: 打点调用 reload() (2)、替换页面(不能回退到上一个页面): ...

  • VUE 动态移除缓存路由

    VUE 动态移除缓存路由 在缓存路由时,有时候需要将缓存的路由清除掉达到刷新页面数据的效果。方法如下: 配置路由时...

  • js监听app的返回键

    利用history和浏览器 刷新popstate状态 去实现 每一次返回都会去历史记录回退 -1 所以就在进入页面...

  • 点击返回到上一页面,定位到原来位置

    测试给指出来一个bug,是页面回退到上一页面位置不固定。如果上次浏览的时候页面时置顶的,回退回来没有问题。但是页面...

  • vue3 路由跳转相关

    需求: 点击按钮实现页面跳转&&触发浏览器的回到上一页/下一页,页面和按钮效果实时变化。 方法: 监听路由变化,v...

  • 日常笔记

    清除浏览器缓存 PS:清除浏览器中的缓存,它和其它几句合起来用,就可以使你再次进入曾经访问过的页面时,浏览器必须从...

  • vue监听浏览器返回

    需求 我在某个页面用了缓存,假如点击了浏览器返回按钮,需要清除缓存信息 代码 监听返回 因为这个页面有跳转其他页面...

  • WKWebView 回退手动刷新

    WKWebView回退时不会对页面刷新,就算你修改了回退时的网址,它也不刷新,只能手动刷新。 怎么在回退后手动刷新...

网友评论

    本文标题:浏览器回退到上一页,刷新历史页面,清除缓存的方法

    本文链接:https://www.haomeiwen.com/subject/miqurqtx.html