前端localStorage中缓存的数据如何与后端接口返回的保持统一

Question

问题遇到的现象和发生背景

前端调取接口，获取一张图片将其缓存，并设置有效期七天。如果其他接口将这个图片改变了，如何让前端的localStorage和数据库中的图片保持一致

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

一个实现思路或方法，能够让前端缓存和数据库保持统一

Answer 1

利用协商缓存，访问已缓存的图片时会和服务器进行交互，来确定是否更新图片，如果没有变化，就是用缓存，有变化就返回新的图片
协商缓存和强缓存的对比可以看我的博客https://blog.csdn.net/qq_38974163/article/details/119890262
协商缓存是利用Last-Modified,If-Modified-Since和ETag,If-None-Match这两对Header来管理的。
Last-Modified，If-Modified-Since
Last-Modified表示本地文件最后修改的日期，浏览器会在request header加上If-Modified-Since(上次返回的Last-Modified的值)，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。

如有帮助，望采纳 ^.^ 谢谢~