如何从浏览器缓存中删除图像

How to remove image from browser cache

本文关键字：删除 图像 缓存 浏览器      更新时间：2023-09-26

在我的 Web 应用程序中，我有大量缩略图集合，用户可以选择缩略图并从原始图像中重新裁剪客户端以重新创建新的缩略图。

没关系，在我的应用程序中，我只需将新创建的图像立即设置为图像源，而无需从服务器重新加载它，然后，新图像将上传到服务器。这是为了确保非常灵敏的感觉。问题是，当用户刷新页面时，他会看到缓存的旧版本的缩略图。

我知道我可以使用一些图像.jpg？sometimestamp来确保浏览器必须下载新版本的缩略图，但正如我所说，该应用程序需要非常灵敏，即使在小而慢的互联网连接上也是如此。（这就是为什么应用程序本身存储在用户的计算机上而不是实时下载的原因。只有上传、下载和 json 在传输）

理想的解决方案是能够告诉浏览器：从缓存中删除此特定文件：someurl.com/somefolder/image.jpg，以便浏览器必须在需要时再次获取它。 这可能吗以及如何？

所以我不是问如何不缓存文件或如何强制重新验证每个调用，而是问如何从浏览器的缓存中删除某些特定文件。

PS：这可能是一个仅限 webkit 的解决方案，因为这是它运行的唯一平台。（它实际上是Qt项目上的qtwebkit。

函数窗口。URL.revokeObjectURL（） 可以解决您的问题。

URL.revokeObjectURL（） 静态方法释放现有对象 以前通过调用创建的 URL 窗。URL.createObjectURL（）. 完成后调用此方法 使用对象 URL，以便让浏览器知道它不需要 以保留对文件的引用。

详情： https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL

请注意，这是一个实验性函数，具有有限的跨浏览器支持。

你不能。当您需要再次下载请求时，将?[something_volatile]附加到请求中，您将获得相同的效果。如果您只在需要时更改附件字符串，该方法不会消除任何敏捷性。

很抱歉死灵，但我认为这对处于相同情况的其他人可能会有所帮助：

上传完成后，执行具有无缓存标头的 AJAX get 请求。

通过在 REQUEST 中指定这一点，您可以告诉浏览器忽略缓存并对服务器执行新请求。

假设我在/images/jondoe.jpg有一个缓存的图像，它可能是这样的：

代码（使用 Axios）：

Axios.post('/upload/new-image', FormDataObject).then(() => { 
  Axios.get('/images/jondoe.jpg', {headers: {'Cache-Control': 'no-cache'}}).then(reloadPageFunction)
// Now you'll have a new image in your cache
})

也许这个链接对你有用，根据它，你可以使用以下代码：

caches.open('v1').then(function(cache) {
    cache.delete('/images/image.png').then(function(response) {
        someUIUpdateFunction();
    });
})
相关文章：