jquery实现点击浏览器后退，上一页面自动刷新

一、需求

比如我们要从列表页进入到详情页，在详情页修改完数据之后，此时若是返回列表页，页面展示的内容也应该和详情页修改之后的内容保持一致才是。如果是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