25

So I'm making this little project and I'm having some troubles with catching. One thing that's not working is the browser keeps caching the json file that contains save data and when I update the json somewhere else, the browser goes back to the old version of the json file that it has cached and reads off that. Unfortunately I dont want that. I dont want the browser to cache the file at all so that every time it loads up the page, it'll ask the server for the json file and act according to that file instead of whatever file that it has cached. I would however like to be able to cache all the other stuff that's on the page but if that has to be sacrificed for this to work then it's a sacrifice I'm willing to make. I'm envisioning that in JavaScript that there would be a call that says discard the current json file and go ask the server again for it or something like

<script src="mySaveFiles.json" cache="no">

or something of the sort to help me achieve what I'm talking about... help?

Muggy Ate
  • 333
  • 1
  • 3
  • 12

4 Answers4

56

The easiest way is to append the source string with some random parameter, which gets ignored on the server side

<script src="mySaveFiles.json?nocache=123" ></script>

One solution would be to generate the script element using JavaScript and append the current time like this:

var el = document.createElement( script );
el.src = 'mySaveFiles.json?nocache=' + (new Date()).getTime();
document.head.appendChild( el );

That way, the browser will never cache the JSON-file as it appears to be a different file (due to the parameter) in every call.

Sirko
  • 72,589
  • 19
  • 149
  • 183
  • so instead of having a tag in the header that has a src of mySaveFiles i would call something like the code you provided there in a function that first gets ran when the page gets loaded and it would be the way I described it? – Muggy Ate Feb 23 '13 at 14:38
  • Thanks. I tried some of the other methods that has been suggested by some of the other people but this one seems to be the most successful in achieving what i wanted. thanks – Muggy Ate Feb 23 '13 at 15:27
  • 1
    You might need to add `type="application/json"` to the script tag: for example `` – Flea Jan 26 '18 at 17:43
  • How do I wait till the script is loaded? currently other scripts relies on it – EvgeniyK Jul 16 '20 at 08:52
  • @EvgeniyK That's outside the scope of this question. But in general, have a look at frameworks for dependency management. – Sirko Jul 16 '20 at 09:21
9

One of my favorites is just htaccess (if this is possible for you, I can't see that)

Disable cache for multiple extensions

<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi|json)$">
    Header unset Cache-Control
</FilesMatch>

Disable cache for just 1 extension

<Files .json>
    Header unset Cache-Control
</Files>

I found it here: http://www.queness.com/post/5421/17-useful-htaccess-tricks-and-tips

Ron van der Heijden
  • 14,803
  • 7
  • 58
  • 82
  • Oh wow that's an awesome solution I must try it out right now :) hopefully this'll be simpler than having to add a time stamp on things o.o – Muggy Ate Feb 23 '13 at 14:43
  • ok i'm running into a problem here. i pasted that in and filtered out the stuff i dont want but at the top of the page it has this line of text that says Header unset Cache-Control and i dont want that line of text showing up. what do i do? – Muggy Ate Feb 23 '13 at 15:05
  • What did you exactly pasted in your code? I update for disabling cache for 1 extension – Ron van der Heijden Feb 23 '13 at 15:55
  • This does not work for chrome on android. Otherwise, it was a neat solution. – Andrew Apr 16 '19 at 08:57
1

Two options:

  1. Add a mySaveFiles.json?t=timestamp query parameter to the end of the url.
  2. Pull the file in with the XmlHttpRequest object (you still may need to add a timestamp depending on the server).
Kevin Seifert
  • 3,494
  • 1
  • 18
  • 14
-1

if you dont want to cache any data then you can use the below meta tag 

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
Gordon
  • 19,811
  • 4
  • 36
  • 74
Ranjith
  • 510
  • 3
  • 10
  • Well it would be nice if I can cache everything except for the json file. I've tried this already but it seem to greatly reduce the performance. I think this will be my last resort if I can find the best alternative :( – Muggy Ate Feb 23 '13 at 14:45
  • 2
    Does this help for stopping cache in the JSON file? Its for individual HTML page, right? @Ranjith – Vaishak Aug 17 '16 at 06:15