I am looking for a way to programmatically empty the browser cache. I am doing this because the application caches confidential data and I'd like to remove those when you press "log out". This would happen either via server or JavaScript. Of course, using the software on foreign/public computer is still discouraged as there are more dangers like key loggers that you just can't defeat on software level.
-
3Which browsers? You should also look at telling the browser what not to cache from the server vs. trying to erase it.– MechNov 16, 2011 at 16:28
-
1You might also want to check out this tutorial on Caching and how it works. mnot.net/cache_docs covers cache control headers and stuff like that– scrappedcolaNov 16, 2011 at 16:32
-
@MechSoftware I want to cache for faster page loads, but I want to clear it after log off. Preferably as good browser support as possible.– TowerNov 16, 2011 at 17:02
-
2@rFactor Nobody would use a browser that gives websites control over its cache.– NullUserExceptionNov 16, 2011 at 17:30
-
3De facto websites have control over the cache, because they control HTTP headers.– Danubian SailorFeb 3, 2014 at 8:36
14 Answers
2023 update: See the
Clear-Site-Data
HTTP header, through which the server can instruct a client web browser to clear the website cache for its domain/subdomain, regardless of earlierCache-Control
headers. Intermediate caches may still have the data cached though and may not respect the header. (thanks, @nishanthshanmugham)
There's no way a browser will let you clear its cache. It would be a huge security issue if that were possible. This could be very easily abused - the minute a browser supports such a "feature" will be the minute I uninstall it from my computer.
What you can do is to tell it not to cache your page, by sending the appropriate headers or using these meta tags:
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
You might also want to consider turning off auto-complete on form fields, although I'm afraid there's a standard way to do it (see this question).
Regardless, I would like to point out that if you are working with sensitive data you should be using SSL. If you aren't using SSL, anyone with access to the network can sniff network traffic and easily see what your user is seeing.
Using SSL also makes some browsers not use caching unless explicitly told to. See this question.
-
9Why would I clear the cache of my web app to annoy my users? I want to do that to clear traces of cached private data. If I tell the browser not to cache, it has to request megabytes of client-side data every time the page loads, which is neither want I want to do.– TowerNov 16, 2011 at 17:04
-
33no one would, because obviously it would not be possible. Just like you can't run scripts on another origin does not mean you can't run a script on your origin. If you can't clear cache on a remote origin, that's logical, but why could I not clear cache of the origin I am executing the code? There's no reason why not to, so I am looking if there's a solution to that, but it looks like it's not possible. If you are so curious I can tell you that I have a large application with a lot of CSS, HTML and JS compiled to about 6 MB.– TowerNov 16, 2011 at 18:44
-
4
-
21Please explain how no matter the implementation, this would be a security issue? This could be implemented safely.– DanJan 9, 2014 at 17:46
-
33Maybe I didn't get enough sleep last night, in what ways would it be a security issue, when a web app could clear (not alter) cache? How could you exploit that? Aug 23, 2014 at 12:38
It's possible, you can simply use jQuery to substitute the 'meta tag' that references the cache status with an event handler / button, and then refresh, easy,
$('.button').click(function() {
$.ajax({
url: "",
context: document.body,
success: function(s,x){
$('html[manifest=saveappoffline.appcache]').attr('content', '');
$(this).html(s);
}
});
});
NOTE: This solution relies on the Application Cache that is implemented as part of the HTML 5 spec. It also requires server configuration to set up the App Cache manifest. It does not describe a method by which one can clear the 'traditional' browser cache via client- or server-side code, which is nigh impossible to do.
-
-
I would say so, and I believe it also it also requires server configuration (to set up the app cache manifest). While this answer offers a solution to the original question, it obscures the fact that it's nigh impossible to clear the traditional browser cache via client- or server-side code. Jul 28, 2014 at 19:03
-
This method seems to bypass the cache and update the content, but when the page is reloaded, it goes back to the previously cached content.– SimplerAug 19, 2014 at 20:56
-
deprecated in favor of service workers developer.mozilla.org/en-US/docs/Web/HTML/…– nadavJan 16, 2017 at 7:34
-
2service workers don't work on iPhones so you have to use the app cache there– tonyJan 31, 2017 at 10:03
use html itself.There is one trick that can be used.The trick is to append a parameter/string to the file name in the script tag and change it when you file changes.
<script src="myfile.js?version=1.0.0"></script>
The browser interprets the whole string as the file path even though what comes after the "?" are parameters. So wat happens now is that next time when you update your file just change the number in the script tag on your website (Example <script src="myfile.js?version=1.0.1"></script>
) and each users browser will see the file has changed and grab a new copy.
-
1for those using some server-side dynamic language, if you can access the file's
ctime
, (ormtime
), you can just add said time behind it. For instance in php,myfile.js?v=<?=filectime('myfile.js');?>
, and there you've got yourself an auto updating cache for your resources. Jan 2, 2018 at 9:21 -
I was using this technique for many days. But I noticed today that, the file is still being rendered from cache even after I changed the version part. I was using Chrome. It was showing even after I deleted the file from the server. Anyone have any info why it may not work? Feb 28, 2018 at 12:36
-
-
This is how I've done it ever since about 2002. It may be ugly, but it has always worked. Without brand new HTML 5.0 features, I think this was the ONLY way to be able to both cache a page and choose when to get a new copy (ie: bust the cache).– ebyrobFeb 18, 2022 at 19:44
-
This technique does enforces a GET request and queries a new file from the perspective of the browser cache, it does however not invalidate the old file still in the cache. Whenever you make a request done already made earlier with the same query (and the browser was instructed to cache) you get back this file from cache. Adding n new queries fills n cache entries. If not done carefully adding random queries pollute the browser cache quickly -> its then rather cache trashing.– LeoApr 8 at 10:55
The best idea is to make js file generation with name + some hash with version, if you do need to clear cache, just generate new files with new hash, this will trigger browser to load new files
Here is a single-liner of how you can delete ALL browser network cache using Cache.delete()
caches.keys().then((keyList) => Promise.all(keyList.map((key) => caches.delete(key))))
Works on Chrome 40+, Firefox 39+, Opera 27+ and Edge.
-
15This is only for items which scripts (usually in a Service Worker) have explicitly stored using the Cache API. It does not give access to the browser's HTTP(s) cache.– TamlynMar 6, 2021 at 15:35
You could have the server respond with a Clear Site Data directive that instructs the user agent to clear the site's locally stored data.
For example:
Clear-Site-Data: "cache", "cookies", "storage"
That header would instruct the user agent to clear all locally stored data, including:
- Network cache
- User agent caches (like prerendered pages, script caches, etc.)
- Cookies
- HTTP authentication credentials
- Origin-bound tokens (such as Channel ID and Token Binding)
- Local storage
- Session storage
- IndexedDB
- Web SQL database
- Service Worker registrations
You can send the request using fetch()
and do location.reload()
afterwards to get a fresh restart.
-
1This is not supported by Safari and Firefox added support for it in version 63 but then removed support for it in version 94.– GrintorJul 15, 2022 at 14:07
On Chrome, you should be able to do this using the benchmarking extension. You need to start your chrome with the following switches:
./chrome --enable-benchmarking --enable-net-benchmarking
In Chrome's console now you can do the following:
chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();
As you can tell from above commands, it not only clears the browser cache, but also clears the DNS cache and closes network connections. These are great when you're doing page load time benchmarking. Obviously you don't have to use them all if not needed (e.g. clearCache() should suffice if you need to clear the cache only and don't care about DNS cache and connections).
Initially I tried various programmatic approach in my html, JS to clear browser cache. Nothing works on latest Chrome.
Finally, I ended up with .htaccess:
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
Tested in Chrome, Firefox, Opera
Reference: https://wp-mix.com/disable-caching-htaccess/
-
1
-
It also is the slowest fix and needs an Apache web server which in general is not very good anymore I think,– france1Oct 7, 2022 at 11:14
location.reload(true); will hard reload the current page, ignoring the cache.
Cache.delete() can also be used for new chrome, firefox and opera.
-
This function do not work with Internet explorer and safari browser. Not sure if work with Microsoft Edge. Jul 27, 2017 at 13:08
-
You can now use Cache.delete()
Example:
let id = "your-cache-id";
// you can find the id by going to
// application>storage>cache storage
// (minus the page url at the end)
// in your chrome developer console
caches.open(id)
.then(cache => cache.keys()
.then(keys => {
for (let key of keys) {
cache.delete(key)
}
}));
Works on Chrome 40+, Firefox 39+, Opera 27+ and Edge.
-
2
//The code below should be put in the "js" folder with the name "clear-browser-cache.js"
(function () {
var process_scripts = false;
var rep = /.*\?.*/,
links = document.getElementsByTagName('link'),
scripts = document.getElementsByTagName('script');
var value = document.getElementsByName('clear-browser-cache');
for (var i = 0; i < value.length; i++) {
var val = value[i],
outerHTML = val.outerHTML;
var check = /.*value="true".*/;
if (check.test(outerHTML)) {
process_scripts = true;
}
}
for (var i = 0; i < links.length; i++) {
var link = links[i],
href = link.href;
if (rep.test(href)) {
link.href = href + '&' + Date.now();
}
else {
link.href = href + '?' + Date.now();
}
}
if (process_scripts) {
for (var i = 0; i < scripts.length; i++) {
var script = scripts[i],
src = script.src;
if (src !== "") {
if (rep.test(src)) {
script.src = src + '&' + Date.now();
}
else {
script.src = src + '?' + Date.now();
}
}
}
}
})();
At the end of the tah head, place the line at the code below
< script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >
-
4It is unclear how this answer works and how it is better than the many existing answer. This could be greatly improved with a description of what approach you're following as well as supporting documentation that shows why that will work– Vlad274Jul 10, 2018 at 13:20
-
While appreciated, this does not clear the browser cache, it seems to cache-bust any links on the given page just by adding params. Dec 13, 2019 at 17:54
-
just iterate over list of link tags and script tags and append query param at end it loads. just simple as it– VimalrajFeb 8, 2022 at 19:24
By definining a function for cache invalidate meta tags:
function addMetaTag(name,content){
var meta = document.createElement('meta');
meta.httpEquiv = name;
meta.content = content;
document.getElementsByTagName('head')[0].appendChild(meta);
}
You can call:
addMetaTag("pragma","no-cache")
addMetaTag("expires","0")
addMetaTag("cache-control","no-cache")
That will insert meta tags for subsequents requests, which will force browser to fetch fresh content. After inserting, you can call location.reload()
and this will work in mostly all browsers (Cache.delete()
is not working at chrome for ex.)
I clear the browser's cache for development reasons. Clearing local storage, session storage, IndexDB, cookies, etc. when the data schema changes. If not cleared, there could be data corruption when syncing data with the database. Cache could also be cleared for security reasons as the OP suggested.
This is the code I use:
caches.keys().then(list => list.map(key => caches.delete(key)))
Simple as that, works like a charm. For more information:
Imagine the .js
files are placed in /my-site/some/path/ui/js/myfile.js
So normally the script tag would look like:
<script src="/my-site/some/path/ui/js/myfile.js"></script>
Now change that to:
<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>
Now of course that will not work. To make it work you need to add one or a few lines to your .htaccess
The important line is: (entire .htaccess at the bottom)
RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
So what this does is, it kind of removes the 1111111111
from the path and links to the correct path.
So now if you make changes you just have to change the number 1111111111
to whatever number you want. And however you include your files you can set that number via a timestamp when the js-file has last been modified. So cache will work normally if the number does not change. If it changes it will serve the new file (YES ALWAYS) because the browser get's a complete new URL and just believes that file is so new he must go get it.
You can use this for CSS
, favicons
and what ever gets cached. For CSS just use like so
<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">
And it will work! Simple to update, simple to maintain.
The promised full .htaccess
If you have no .htaccess yet this is the minimum you need to have there:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>