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

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

百度后发现了一篇文章&＃xff0c;是讲解disk cache与memory cache之间的区别的&＃xff1a; disk cache与memory cache的区别&＃xff1a;https://blog.csdn.net/Garrettzxd/article/details/80684880?utm_medium&＃61;distribute.pc_relevant_t0.none-task-blog-2defaultBlogCommendFromMachineLearnPai2default-1.control&depth_1-utm_source&＃61;distribute.pc_relevant_t0.none-task-blog-2defaultBlogCommendFromMachineLearnPai2default-1.control 平时经常看到的是第三种&＃xff0c;也就是资源本身的大小&＃xff0c;但是浏览器页面回退时出现了第二种状态&＃xff1a; 目前可以确定的是谷歌浏览器会有三种区分&＃xff0c;其他的浏览器并非都是如此&＃xff1a;我这边也确实是用谷歌浏览器复现的这个问题&＃xff1a;

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

解决步骤有两步&＃xff1a;

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

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

在点击“购物车”字样时&＃xff0c;触发下面的函数体&＃xff1a;

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

最后展示一下效果&＃xff1a; 接口没有调通不用管&＃xff0c;是没有登录账号的原因&＃xff0c;只需要注意后面size的来源&＃xff0c;刚返回到此页面时&＃xff0c;接口是从disk cache中获取数据&＃xff0c;当点击“购物车”字样时&＃xff0c;调取的接口展示了大小&＃xff0c;也就是从接口中实时获取的数据。 上面的方法&＃xff0c;其实并没有解决&＃xff0c;从缓存中拿数据的问题。

下面附上大佬的解决办法&＃xff0c;可以后续测试一下&＃xff1a;

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

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