chrome浏览器页面返回上一页面时，接口从“from disk cache“缓存中获取数据了……

我对浏览器本身不是很熟悉，今天在实现一个页面跳转的功能时，发现了一个问题：

场景：列表页面，可以将产品添加到购物车中，点击购物车中的“申请”按钮，可以跳转到下单页面，在下单页面通过点击“浏览器的回退按键”时，发现列表页面获取接口数据并非直接调用接口，有接口是从本地磁盘中获取的。效果如下：

disk cache

百度后发现了一篇文章，是讲解disk cache与memory cache之间的区别的：
disk cache与memory cache的区别：https://blog.csdn.net/Garrettzxd/article/details/80684880?utm_medium=distribute.pc_relevant_t0.none-task-blog-2_defaultBlogCommendFromMachineLearnPai2_{default-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2}default_{BlogCommendFromMachineLearnPai2}default-1.control

平时经常看到的是第三种，也就是资源本身的大小，但是浏览器页面回退时出现了第二种状态：

目前可以确定的是谷歌浏览器会有三种区分，其他的浏览器并非都是如此：我这边也确实是用谷歌浏览器复现的这个问题：

浏览器回退到当前页面时，需要从接口调取数据而非缓存的解决办法

如果要实现从接口调取数据，则需要单独处理一下。
比如我现在是购物车的下单部分，下单时是可以修改产品的数量的，因此购物车的接口是变的，如果通过本地缓存或者硬盘中读取接口数据，则不能保证数据是否实时，因此需要单独处理一下：

解决步骤有两步：

1. 监听下一个页面的回退，如果监听到回退则本地存储一个缓存，设置为true
2. 在当前页面获取缓存的数据，如果为true则需要重新调取接口。我这边是点击“购物车”文字时在进行接口的调用，如果页面一加载就需要调用接口，则可以通过延时调取接口的方式来处理

监听浏览器的回退按钮

 $(function () {
    pushHistory();
    window.addEventListener("popstate", function (e) {
        console.log("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
        localStorage.setItem("refreshFlag", true);
        history.back();
    }, false);
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
});

当监听到浏览器的回退按钮操作时，我存储到本地一个flag，然后在上一个页面获取这个flag；

根据缓存值确定是否重新调取接口

在点击“购物车”字样时，触发下面的函数体：

 var refreshFlag = localStorage.getItem("refreshFlag");
 if (refreshFlag) {
     console.log("重新加载购物篮数据");
     this.getCartList();
     localStorage.removeItem("refreshFlag");
 }

最后展示一下效果：
接口没有调通不用管，是没有登录账号的原因，只需要注意后面size的来源，刚返回到此页面时，接口是从disk cache中获取数据，当点击“购物车”字样时，调取的接口展示了大小，也就是从接口中实时获取的数据。

上面的方法，其实并没有解决，从缓存中拿数据的问题。

下面附上大佬的解决办法，可以后续测试一下：

ajax.get('你的接口‘’,  {headers: {'Cache-Control': 'no-cache'}})

评论中，有人这么评论。如果上面的方法不适用，可以根据下面的评论进行改动