缓存更新后用户还是看到旧数据怎么办？

❤娇娇提问于 2026-03-23 21:44:24 阅读 15

优化

我在做前端接口缓存，用的是 localStorage 存接口返回的数据。但后台数据更新后，用户刷新页面还是看到老内容，除非手动清缓存。有没有办法自动判断数据是否过期？

我试过加时间戳字段，比如 cacheTime: Date.now()，然后每次读取时判断是否超过 5 分钟，但感觉逻辑有点乱，而且不同接口缓存策略不好统一管理。

现在代码大概长这样：

const cached = JSON.parse(localStorage.getItem('userProfile'));
if (cached && Date.now() - cached.cacheTime < 300000) {
  return cached.data;
} else {
  // 重新请求
}

有没有更优雅的缓存更新方案？比如结合 ETag 或者服务端通知？

我来解答赞 1 收藏

反馈

1 条解答

溢洋 ☘︎ Lv1

常见的解决方案是使用版本号或者ETag来管理缓存的有效性。你可以让服务端在返回数据的时候附带一个版本号或者ETag，前端在请求时带上这个版本号或ETag，服务端根据这些信息判断是否需要返回新的数据。

具体来说，你可以这样做：

1. 服务端返回数据时，增加一个版本号字段，比如 version。
2. 前端存储数据时，除了存储数据本身，也存储这个版本号。
3. 下次请求时，带上这个版本号。
4. 服务端收到请求后，比较请求中的版本号和当前数据的版本号，如果不一样，则返回新的数据。

举个例子，代码可能看起来像这样：

async function fetchUserProfile() {

  const cached = JSON.parse(localStorage.getItem('userProfile'));

  const version = cached ? cached.version : null;



  const response = await fetch('/api/userProfile', {

    headers: {

      'If-None-Match': version, // 使用ETag的话

      // 或者 'X-Version': version, // 使用版本号的话

    }

  });



  if (response.status === 304) {

    // 数据未变化，继续使用缓存

    return cached.data;

  } else {

    const data = await response.json();

    const newCache = {

      data: data,

      version: response.headers.get('ETag') || data.version, // 根据实际情况选择

    };

    localStorage.setItem('userProfile', JSON.stringify(newCache));

    return data;

  }

}

这种方式可以更好地管理和同步缓存，避免手动清理缓存或者时间戳计算带来的麻烦。

2026-03-23 22:06