5

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

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

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

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

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

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

4

4 回答 4

4

函数window.URL.revokeObjectURL()可以解决您的问题。

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

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

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

于 2014-08-17T15:10:02.883 回答
1

You can't. Append a ?[something_volatile] to the request when you need to download it again, and you'll get the same effect. That method won't take away any of the snappiness if you only change the appendage string when needed.

于 2013-09-12T07:33:16.590 回答
1

抱歉，necropost，但我认为它可能对处于相同情况的其他人有所帮助：

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

通过在 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
})
于 2017-12-07T17:11:39.533 回答
1

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

caches.open('v1').then(function(cache) {
    cache.delete('/images/image.png').then(function(response) {
        someUIUpdateFunction();
    });
})
于 2018-08-30T09:28:13.127 回答