如何获取Web客户端中图片URL的缓存日期？

嘿，这个需求我太懂了！在浏览器里直接获取图片的缓存日期确实没有特别直白的API，但咱们有几个实用的办法能实现你要的功能，我给你拆解一下：

1. 用浏览器的Performance API查已加载资源的时间 #

浏览器自带的Performance接口能拿到所有已加载资源的详细加载信息，其中就包含图片的缓存相关时间戳。你可以通过它找到目标图片的资源条目，提取对应的时间作为缓存日期参考。

给你改改你的React组件示例，直接能用：

import { useState, useEffect } from 'react';

export default function Thumbnail({ url, updatedDate }) {
  const [cachedDate, setCachedDate] = useState(null);

  useEffect(() => {
    // 封装一个函数查找对应图片的缓存时间
    const getCachedImageDate = () => {
      // 拿到所有已加载的资源条目
      const resources = performance.getEntriesByType('resource');
      // 过滤出当前图片的URL对应的条目
      const imageResource = resources.find(item => item.name === url);
      if (imageResource) {
        // fetchStart是资源开始加载的时间，如果是从缓存取的，这个时间会极短
        return new Date(imageResource.fetchStart);
      }
      // 没找到的话说明图片还没加载过，或者是跨域资源（跨域没开CORS的话拿不到）
      return null;
    };

    // 初始化获取缓存时间
    setCachedDate(getCachedImageDate());

    // 也可以等图片加载完成后再更新一次，确保拿到最新的记录
    const img = new Image();
    img.onload = () => {
      setCachedDate(getCachedImageDate());
    };
    img.src = url;
  }, [url]);

  // 对比缓存时间和服务器的更新时间，决定是否加强制刷新参数
  const queryStr = cachedDate && cachedDate < new Date(updatedDate) ? `?force=${Math.random()}` : '';

  return (
    <img
      src={url + queryStr}
      alt={'THUMB'}
    />
  );
}

⚠️ 注意：如果你的图片是跨域资源，而且服务器没配置CORS相关头，那Performance API是拿不到这个资源的详细信息的，这种方法就失效了。

2. 自己在本地维护缓存时间记录 #

要是上面的方法受限于跨域，那咱们可以自己动手，用localStorage或者sessionStorage来存每个图片URL的首次加载时间，把这个当作“缓存日期”来用，完全可控。

给你写个示例：

import { useState } from 'react';

export default function Thumbnail({ url, updatedDate }) {
  // 从本地存储里拿缓存的日期
  const getCachedDate = () => {
    const storedDate = localStorage.getItem(`img-cache-key-${url}`);
    return storedDate ? new Date(storedDate) : null;
  };

  // 把当前时间存到本地存储
  const saveCachedDate = () => {
    localStorage.setItem(`img-cache-key-${url}`, new Date().toISOString());
  };

  const cachedDate = getCachedDate();
  const queryStr = cachedDate && cachedDate < new Date(updatedDate) ? `?force=${Math.random()}` : '';

  return (
    <img
      src={url + queryStr}
      alt={'THUMB'}
      onLoad={() => {
        // 只有当之前没缓存记录的时候，才存当前时间（说明是第一次加载，不是从缓存取的）
        if (!cachedDate) {
          saveCachedDate();
        }
      }}
    />
  );
}

这个方法的好处是完全不受跨域限制，但要记得自己管理存储的清理，比如可以加个逻辑定期删掉过期的缓存记录，不然localStorage会存一堆旧数据。

3. 结合HTTP响应头做间接判断 #

如果你的服务器给图片返回了Last-Modified响应头，那咱们可以发一个HEAD请求去拿这个头信息，把它当作图片的最后修改时间，和服务器给你的updatedDate对比。虽然这不是客户端的缓存日期，但能间接实现“是否需要刷新图片”的核心需求。

示例代码如下：

import { useState, useEffect } from 'react';

export default function Thumbnail({ url, updatedDate }) {
  const [lastModifiedDate, setLastModifiedDate] = useState(null);

  useEffect(() => {
    // 发HEAD请求拿响应头
    const fetchLastModified = async () => {
      try {
        const response = await fetch(url, { method: 'HEAD' });
        if (response.ok) {
          const lastModStr = response.headers.get('Last-Modified');
          if (lastModStr) {
            setLastModifiedDate(new Date(lastModStr));
          }
        }
      } catch (err) {
        console.error('获取文件修改时间失败:', err);
      }
    };
    fetchLastModified();
  }, [url]);

  const queryStr = lastModifiedDate && lastModifiedDate < new Date(updatedDate) ? `?force=${Math.random()}` : '';

  return (
    <img
      src={url + queryStr}
      alt={'THUMB'}
    />
  );
}

这个方法的关键是服务器要配置好Last-Modified响应头，好处是不用依赖客户端的缓存记录，直接和服务器的文件状态对比，逻辑更准确。

备注：内容来源于stack exchange，提问作者user367942