一、需求
比如我们要从列表页进入到详情页,在详情页修改完数据之后,此时若是返回列表页,页面展示的内容也应该和详情页修改之后的内容保持一致才是。如果是location.href=''
跳转到列表页的,则可以实现正常刷新。但如果是点击浏览器的后退按钮呢?
大家都知道,浏览器有自己的缓存机制,我们的网页是被浏览器缓存了。如果想要后退刷新的按钮的话,建议是采用js的手段去控制。
二、寻找方案
1、网上百度
大家一百度就会发现,网上都是说的在html顶部加上不能缓存的meta
标签,或者使用input隐藏域
等,我在本地试了下没一个成功的。可能是我的使用方式不对吧。
2、采用cookie策略
既然以上方法都不行,那么能不能从cookie入手呢。根据我们的需求,我们又怎么才能在每次加载页面的时候,都根据cookie刷新页面呢?
首先是了解一下jquery的一个cookie插件:
jquery-cookie中文文档
了解完大致操作之后,我们可以设想下:
(1)如果我们每次进入页面都获取一个未知的cookie值,那么返回值是null。
(2)我们给页面的cookie赋值一个数字。
(3)然后我们下次进入页面就能获取这个cookie的值。
(4)此时我们可以重新给这个cookie赋值为null(方便每次进页面,cookie都为null,实现每次都能刷新页面)
(5)使用`location.reload()`方法刷新页面即可
3、代码部分
<script src=" https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
//这里的test可以是任意的值,反正我们是获取不到这个值的。打印一下,发现获取不到的cookie为null
$first=$.cookie('test'); 、
if(!$first||$first=='null'||$first==null){
//第一次进页面,肯定是没有cookie的,所以这里设置cookie的值为1,时间为7天
$.cookie('test','1',{ expires: 7 });
}else{
//然后等下次回到页面,肯定会取到cookie的值,然后我们就反其道而行,给cookie赋值为null,同时刷新页面
$.cookie('test',null);
location.reload(true);
}
</script>
(1)如果觉得引入外部JS会影响速度,那么就存放在本地最好
(2)这段代码建议放在的最下面,这样页面体验好。如果放到head的话,页面会出现短暂的白屏刷新
然后我们试验这段代码,就会发现真的实现了我们的需求。每次点击浏览器后退按钮,我们的列表页都会刷新,而且刷新的体验会很好,页面加载完之后只需要改变dom的值即可。
参考链接:
https://blog.csdn.net/xiawu1990/article/details/52055466
end