Chrome : Hard reload images

Question

To hard refresh cached images I have tried multiple ways: like clearing localStorage and sessionStorage. Sending the Clear-Site-Data header also not clear cached images from the browser.

location.reload(true);//is now deprectaed which is also not helping here

But no luck, I'm still getting old images.

I want to achieve chrome's "Empty cache and Hard Reload" feature.

I don't want to go with making the image URL unique, as it's referred from 50+ places.

Does this answer your question? [Clear the cache in JavaScript](https://stackoverflow.com/questions/1011605/clear-the-cache-in-javascript) — Justinas, Nov 03 '20 at 11:41
Does this answer your question? [Disabling Chrome cache for website development](https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development) — Jax-p, Nov 03 '20 at 11:42

Ozgur Sar · Answer 1 · 2020-11-03T11:50:28.990

0

Check out the Cache.delete() Web API

https://developer.mozilla.org/en-US/docs/Web/API/Cache/delete

This sample code may delete all cached items. Give it a try

caches.open('v1').then(function(cache) {
  cache.keys().then(function(keys) {
    keys.forEach(function(request, index, array) {
      cache.delete(request);
    });
  });
})

edited Nov 03 '20 at 11:50

answered Nov 03 '20 at 11:46

Ozgur Sar

2,067
2
11
23

I added sample code from here but didn't try it myself. https://developer.mozilla.org/en-US/docs/Web/API/Cache/keys – Ozgur Sar Nov 03 '20 at 11:51
This also doesn't help:`caches.keys().then((keyList) => Promise.all(keyList.map((key) => caches.delete(key))))` – Kanti Nov 03 '20 at 11:53
I found another way that may clear the cache, cookies etc. When delivered with a response from https://example.com/clear, the following header will cause all cookies, caches, and DOM-accessible storage associated with the origin https://example.com to be cleared, as well as execution contexts for the same origin to be neutered and reloaded: Clear-Site-Data: "*" https://www.w3.org/TR/clear-site-data/ – Ozgur Sar Nov 03 '20 at 11:59
Hi @ozgur I have tried `Clear-Site-Data` header too but no luck – Kanti Nov 03 '20 at 14:20
@Kanti, I'm sorry I'm out of ideas – Ozgur Sar Nov 04 '20 at 06:29
1

Finally `"Clear-Site-Data": "cache"` header has worked, previously I passed `cache` without double-quote, I have found this answer helpful, but because of VPN it was not showing images and the answer is in image https://stackoverflow.com/questions/54185821/clear-site-data-header-error-in-chrome-console#answer-55142501 – Kanti Nov 05 '20 at 13:45
Can the Clear-Site-Data header be included somehow in the HTML source of a web page? – David.P Nov 14 '22 at 23:11

Chrome : Hard reload images

1 Answers1