For the twelve days of Christmas I'm running this simple family website. As part of it, everyday I edit a text file that will give different answers/content each day. Well I'm having a problem where I have to tell everyone to delete there cache to get the new info. I've never had this before. I just barely added these two statements.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

and

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0);

found How to control web page caching, across all browsers?

I tested that everything still loads fine but I do not want to test it by changing the actual content until tomorrow. My question is, is there any way to make sure that the browser does not cache the text files that I am pulling in using using this javascript code

function readInFile(file)
{
    var rawFile = new XMLHttpRequest();

    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function()
    {
        if (rawFile.readyState === 4)
        {
            if (rawFile.status === 200 || rawFile.status == 0)
            {
                parseFile(rawFile.responseText, document.getElementById("answerText").value)
            }
        } 
    };
    rawFile.send(null);
}

I don't want the browsers to stop caching the html/js but continue caching the text files. Will what I have now prevent the browsers from doing such? I've never had a problem like this before> I also used the HTML5 Boilerplate this time around just to try it out if that makes any difference. I ended up removing alot of it though.

For the twelve days of Christmas I'm running this simple family website. As part of it, everyday I edit a text file that will give different answers/content each day. Well I'm having a problem where I have to tell everyone to delete there cache to get the new info. I've never had this before. I just barely added these two statements.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

and

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0);

found How to control web page caching, across all browsers?

I tested that everything still loads fine but I do not want to test it by changing the actual content until tomorrow. My question is, is there any way to make sure that the browser does not cache the text files that I am pulling in using using this javascript code

function readInFile(file)
{
    var rawFile = new XMLHttpRequest();

    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function()
    {
        if (rawFile.readyState === 4)
        {
            if (rawFile.status === 200 || rawFile.status == 0)
            {
                parseFile(rawFile.responseText, document.getElementById("answerText").value)
            }
        } 
    };
    rawFile.send(null);
}

I don't want the browsers to stop caching the html/js but continue caching the text files. Will what I have now prevent the browsers from doing such? I've never had a problem like this before> I also used the HTML5 Boilerplate this time around just to try it out if that makes any difference. I ended up removing alot of it though.

• javascript
• html
• caching
• text-files

2 Answers 2

Cache-busting

Add a random parameter to the end of the url, like the current timestamp. Make it look like:

http://yourdomain./path/to/file.txt?t=1873261823

You can use new Date().getTime() or the more recent Date.now() or roll your own random number generator for the value of the parameter.

You can call each file something different.

http://example./file123809.txt

You can mix some PHP in there if you want.

http://example./file<?php echo time(); ?>.txt

There are obviously other ways of getting a timestamp, or even just a unique number, but I feel the way I listed is the most convenient, and since PHP is server side, it will work on all devices.