主页 M

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

2022-05-02 网页编程网 网页编程网

1.h5网页

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

当回退到历史页面时,页面依然会从上往下渲染执行,执行到这段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(window.name != "noReload"){
console.log('cache happened')
window.name = "noReload"
location.reload()
}else{
window.name = ""
}

2.小程序解决方案

移动端微信浏览器回退到上一页清空缓存的方法。

onpageshow事件在用户浏览网页时触发。类似于onload事件,onload 事件在页面第一次加载时触发,onpageshow 事件在每次加载页面时触发,即onload 事件在页面从浏览器缓存中读取时不触发,此外还有pagehide在不显示的时候触发。

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);
}
阅读原文
阅读 17439
123 显示电脑版