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

矫情吗；* 2021-09-07 22:42 477阅读 0赞

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

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

## 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-2defaultBlogCommendFromMachineLearnPai2default-1.control&depth\_1-utm\_source=distribute.pc\_relevant\_t0.none-task-blog-2defaultBlogCommendFromMachineLearnPai2default-1.control][disk cache_memory cache_https_blog.csdn.net_Garrettzxd_article_details_80684880_utm_medium_distribute.pc_relevant_t0.none-task-blog-2defaultBlogCommendFromMachineLearnPai2default-1.control_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-2defaultBlogCommendFromMachineLearnPai2default-1.control]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
平时经常看到的是第三种，也就是资源本身的大小，但是浏览器页面回退时出现了第二种状态：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
目前可以确定的是谷歌浏览器会有三种区分，其他的浏览器并非都是如此：我这边也确实是用谷歌浏览器复现的这个问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

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

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

解决步骤有两步：

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`中获取数据，当点击“购物车”字样时，调取的接口展示了大小，也就是从接口中实时获取的数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
上面的方法，其实并没有解决，从缓存中拿数据的问题。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

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

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

![在这里插入图片描述][20210624172541279.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/48085aafec16445298107bec4210ffd4.png
[disk cache_memory cache_https_blog.csdn.net_Garrettzxd_article_details_80684880_utm_medium_distribute.pc_relevant_t0.none-task-blog-2defaultBlogCommendFromMachineLearnPai2default-1.control_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-2defaultBlogCommendFromMachineLearnPai2default-1.control]: https://blog.csdn.net/Garrettzxd/article/details/80684880?utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/24d4a5a447174ef980e2fc888e21f0b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/937370eef98043c9af891fb69818b99c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/1f2a7a4d967c44518dc885e72c302518.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/37dd520fa8ae4a83acfb30b8aa19d180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/09da4f5f4a474d6799cb5fd8bf6b8e15.png
[20210624172541279.png]: /images/20210725/ee3097c057d944958c900bf54399c67e.png