Chrome browser displaying cached content even after fetching fresh content from server

Question

The html page looks like this:

    Cache-Control:no-store
    Connection:keep-alive
    Content-Encoding:gzip
    Content-Type:text/html
    Date:Tue, 04 Feb 2014 14:51:46 GMT
    Server:nginx/1.4.4
    Transfer-Encoding:chunked


  <html>
    <head>
        <script type=javascript>

    funciton buttonClick(){
        var box = document.getElementById("box");
        box.val = "aaaaaaaaaaaaaaaaaaaa";
    }

    </script>
</head>
<body>

<textarea id="box">bbbbbbbbbbbbbbbbbbbbb</textarea>
<button onclick="buttonClick">button</button>
</body>

</html>

First I click the button...#box.val == "aaaaaaaaa". Then I visit a different page and then click the back button. #box.val is still "aaaaaaaa" when it should be "bbbbbbbbbbb".

I can see the browser has made a request to the server for fresh html. However, the browser is displaying "aaaaaaaaaaa".

When I inspect the source of the page in the browser it has "bbbbbbbbbbbbbb" but it displays "aaaaaaaaaaaaaa".

My Chrome version is 32.0.1700.102

This doesn't happen in FF or IE. Is there anything I can do to prevent this problem.

Did you check previous questions like http://stackoverflow.com/questions/4146813/how-to-stop-chrome-from-caching or http://stackoverflow.com/questions/16173322/google-chrome-does-not-revalidate-etag-on-back-forth ? — Cedric Simon, Feb 04 '14 at 14:33
As per your comment you are using Cache-Control: no-store,no-cache,max-age=0; Did you try Cache-Control: no-store; only? — Cedric Simon, Feb 04 '14 at 14:43
Yes, I've tried all different combinations of those three. The problem still happens in each case. — Francis Snipe, Feb 04 '14 at 14:45
This is not the correct way of displaying header. Please try my code below. And here: http://www.w3schools.com/tags/tag_meta.asp — Cedric Simon, Feb 04 '14 at 15:02
Next time you answer a question, make sure to publish the FULL code. — Cedric Simon, Feb 04 '14 at 15:03

Cedric Simon · Answer 1 · 2014-02-04T14:58:25.913

0

Your HTML tags are badly formatted (space before tag name). I did edit your post but also found other javascript detail issues corrected in below code.

Please try out with well formatted HTML. And let us know the outcome.

    <html>
        <head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-STORE">
            <script type="text/javascript">

        funciton buttonClick(){
            var box = document.getElementById("box");
            box.val = "aaaaaaaaaaaaaaaaaaaa";
        }

        </script>
    </head>
    <body>

    <textarea id="box">bbbbbbbbbbbbbbbbbbbbb</textarea>
    <button onclick="buttonClick();">button</button>
    </body>

    </html>

edited Feb 04 '14 at 14:58

answered Feb 04 '14 at 14:52

Cedric Simon

4,571
4
40
52

Ok my code was a bit sloppy but it is just to illustrate the problem, its not the actual code i`m using. But when you run the code you have posted above, can you recreate the problem I`ve described? – Francis Snipe Feb 04 '14 at 14:55
Did you test above code, with HTML header inside HTML code? – Cedric Simon Feb 04 '14 at 15:43
Yes i tried it and it didn't solve the problem. Can you recreate the issue? – Francis Snipe Feb 04 '14 at 19:43
I think this issue is specific to textareas. If you change the to a <div> the issue goes away.</div> – Francis Snipe Feb 04 '14 at 19:46

Chrome browser displaying cached content even after fetching fresh content from server

1 Answers1