Clear and Bypass the Cache with JavaScript

What is cache?

Cache is a store of saved files. The browser keeps copies of your scripts, styles and pictures so pages load fast. When you change a file, visitors may still see the old copy. JavaScript is the language that runs inside the browser. It cannot wipe the whole browser cache for security reasons. It can clear some storage areas and help you load fresh files.

Method 1: Reload from the server

1. Open your page.
2. Do a hard refresh by hand. On Windows press Ctrl+Shift+R. On a Mac press Cmd+Shift+R.

This asks the browser to ignore saved copies for that page.

Method 2: Add a version to your file link

A new address means a new file to the browser. Add a number after the file name in your HTML.

<script src="app.js?v=2"></script>

Change v=2 to v=3 each time you update the file. This is the most reliable method.

Method 3: Clear storage with code

Websites can save data in the browser. Use these lines to delete it.

localStorage.clear();
sessionStorage.clear();

These remove everything your site saved in local storage and session storage. They only touch your own site's data.

Method 4: Clear the Cache Storage

Sites that use service workers keep files in a special store called Cache Storage. A service worker is a script that runs in the background to help a site work offline. Clear it like this.

caches.keys().then(function (names) {
  names.forEach(function (name) {
    caches.delete(name);
  });
});

This finds every named cache and deletes it.

Method 5: Force a fresh fetch

fetch('data.json', { cache: 'no-store' })

The no-store option tells the browser not to use a saved copy of that request.

Quick recap

• JavaScript cannot wipe the full browser cache.
• Add ?v=number to file links to force new copies.
• Use localStorage.clear() and caches.delete() for stored data.
• Use cache: 'no-store' for fresh requests.