How to remove image from browser cache

问题

In my web app, I have a large collection of thumbnails, the user is able to select a thumbnail and client side recrop from the original image to recreate a new thumbnail.

That's fine, in my app, I just set the newly created image instantly to the image source, without reloading it from the server, and next to this, the new image is uploaded to the server. This is to ensure a very responsive feeling. The problem is that when to user refreshes the page, he sees the cached old version of the thumbnail.

I know I could use some image.jpg?sometimestamp to be sure the browser has to download a new version of the thumbnail, but as I said, the app needs to be very responsive, even on small &slow internet connections. (Thats why the app in itself is stored on the user's computer and not downloaded live. Only uploads, downloads and jsons are transitting)

The ideal solution would be to be able to tell the browser : remove this particular file from your cache : someurl.com/somefolder/image.jpg, so that the browser has to fetch it again when it needs it. is this possible and how?

So I'm not asking how not to cache files or how to force re-verification each call, I'm asking how I could remove some particular file from browser's cache.

ps: this can be a webkit-only solution as this is the only platform it is running on.(it is actually a qtwebkit on a Qt project.

回答1:

The function window.URL.revokeObjectURL() can solve your problem.

The URL.revokeObjectURL() static method releases an existing object URL which was previously created by calling window.URL.createObjectURL(). Call this method when you've finished using a object URL, in order to let the browser know it doesn't need to keep the reference to the file any longer.

For details: https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL

Note that this is an experimental function with limited cross-browser support.

回答2:

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.

回答3:

Sorry for necropost, but I think it could be helpful for others in the same situation:

When your upload is done, perform an AJAX get request with no-cache header.

By specifing this in the REQUEST, you tell the browser to ignore cache and to perform a new request to server.

Assuming I have a cached image at /images/jondoe.jpg, it could be like this :

Code (using 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
})

回答4:

Maybe this link is useful for u, according to it, u can use below code :

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

来源：https://stackoverflow.com/questions/18758102/how-to-remove-image-from-browser-cache

标签

javascript

html

caching

webkit

qtwebkit