【Web缓存】学习浏览器缓存机制

问题：

列表数据增删改查，修改列表图片数据，无法实时反馈到列表，必须刷新一次，列表图片数据才能更新，如下。

而预期效果如下：

更新图片后，点击编辑用户确定按钮， 列表实时更新图片数据。

静态图片资源是请求单独API获取：http://localhost:2022/File/Content?id=129。

id为129用户的图片数据，API永远不变，而该API响应的静态资源，就会受浏览器缓存的限制。

但由于前台请求API时，还需要经过浏览器，而恰恰就是浏览器识别并发现此静态资源缓存，所以页面渲染了缓存的旧图片数据。

解决方法：用随机数封装API，不断地产生新的API请求。

//IView table 
        columns = [
            {
                type: "selection",
                width: 80,
                align: "center",
            },
            {
                title: "序号",
                type: "index",
                width: 80,
                align: "center",
            },
            {//列表图片数据渲染
                title: "人员照片",
                key: "fileUrl",
                width: 100,
                render: (h: any, params: any) => {
                    let imgUrl = !!params.row.fileUrl ?
                    this.fileUrl(params.row.fileUrl) : DefaultImg;//如果用户有图片数据，则请求用户图片API，无则显示默认图片。
                    return h("img", {
                        attrs: {//img 元素属性
                            src: imgUrl,//将图片挂载到对应位置
                        },
                        style: {//img 元素样式
                            marginTop: "5px",
                            width: "50px",
                            height: "50px",
                            objectFit: "cover",
                        },
                    });
                },
            }]

        /** 拼接图片地址 */
        fileUrl(fileUrl) {
        //用随机数封装API，不断地产生新的API请求。
            return URL + fileUrl + "&random=" + Math.random();
        }

解决问题的代码非常简单，难的是找出问题。

之前对Web缓存知之甚少，因为这次问题，也深入学习了一下。

web缓存：浏览器缓存、代理服务器缓存、数据库缓存、应用层缓存、CDN缓存。 链接

web缓存——浏览器缓存 链接

HTTP缓存：强缓存、协商缓存（header 参数设置）

本地存储：localStorage、sessionStorage、cookie、websql、indexDB