0

I've tried several methods, especially all listed here:

...but they all seem to only trigger a reload using local cache.

Is there any way to trigger a forced reload, bypassing any cache (especially for images) via an HTML button?

Alternatively, is there a line of HTML code that would force the page to not use cache at all?

The page is a simple static html page that changes a few times a day.

David.P
  • 196
  • 1
  • 9
  • 1
    What's the use case? Are you directing users to click the button? Do the linked resources also need cache-busting? More detail, please. – isherwood Nov 11 '22 at 14:40
  • 1
    There are HTML and maybe another assets cached such as images, CSS, JS. For HTML cache, make sure that your page don't have anything functional with some query string like `?v=xx` and then add a button to re-location `'?v=' + date.getTime()` where `date` is JS [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object. But this may cause of another problems. – vee Nov 11 '22 at 14:58
  • It would be best if users didn't have to click a button, and the page would always load without using cache instead. This is only about cached images, other assets are not critical and do not necessarily need to be reloaded. – David.P Nov 11 '22 at 18:06
  • _Is there any way to trigger a forced reload, bypassing any cache (especially for images) via an HTML button?_ – vee Nov 12 '22 at 15:12

3 Answers3

1

There is no HTML-only way to do it.

You could try using window.location.reload(true) which will try to reload the current page and ignore cache files on some browsers. But this is not part of the specification and won't work on most browser (https://developer.mozilla.org/en-US/docs/Web/API/Location/reload)

The real way to make it is to version your filenames ! There are many tools to do it quite easily. When the page will refresh, as the name will have changed, your browser is going to load the new file and you won't have cache problem anymore

Medrupaloscil
  • 85
  • 1
  • 1
  • 8
1

I'm pretty sure it's not possible to force reload (+ clear cache) in HTML itself.

One solution is to make a button and give that a JS function, in which both the cache is cleared and the page reloaded.

function reloadClear() {
  window.localStorage.clear();
  window.location.reload(true);
  return false;
}
Cazlo
  • 93
  • 7
  • I would love to try this. Unfortunately I don't know whether it's possible to include your code in my pure HTML page, and if so, where? – David.P Nov 11 '22 at 18:09
  • You could just put a – Cazlo Nov 11 '22 at 19:03
  • Awesome, will try -- would you mind showing me how to link that to an HTML button? – David.P Nov 11 '22 at 19:24
  • Ah I believe I found it: https://stackoverflow.com/a/5025990/1388921 – David.P Nov 11 '22 at 19:25
  • Could this script also be auto-run before the page loads? – David.P Nov 11 '22 at 19:25
  • I tried your script and linked it to a button. While it reloads the page, the browsers (Chrome or Edge) still use the cached images. I am at a loss what to do now? – David.P Nov 11 '22 at 19:34
  • Could you instead try to randomize a number, add that to a variable, and put that in the reload link? e.g. `var random = Math.floor(Math.random() * 100000);` and then changing the reload link to: `window.location = location.href + '?r=' + random;` – Cazlo Nov 12 '22 at 18:08
  • 1
    You could run this script [onPageLoad](https://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load) instead of on a button click, yes; **although that would cause an infinite reload loop.** – Cazlo Nov 12 '22 at 18:15
0

just remove localstorage saved files use window.localstorage.remove('name of the item you saved') or if you didnt what all of them just use window.localstorage.clear() then reload it with window.location.reload(true)

Naol BM
  • 31
  • 2