Question

在我的网络应用程序中，我有大量缩略图，用户可以从原始图像中选择缩略图和客户端重新编辑，以重新创建新的缩略图。

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

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

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

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

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

Answer 1

你做不到。当您需要再次下载请求时，请为?[something_volatile]附加一个{{1}}，您将获得相同的效果。如果仅在需要时更改附加字符串，那么该方法不会消除任何快照。

Answer 2

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

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

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

Answer 3

对不起necropost，但我认为这对同样情况的其他人有帮助：

上传完成后，使用 no-cache header 执行AJAX获取请求。

通过在REQUEST中指定此项，您告诉浏览器忽略缓存并向服务器执行新请求。

假设我在void foo(const std::string& s);有一个缓存图像，它可能是这样的：

代码（using Axios）：

/images/jondoe.jpg

Answer 4

也许this link对您有用，据此，您可以使用以下代码：

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