How do you cache a file client-side such that the browser stops even bothering to request it again?

Question

I send back an image with the following HTTP response header:

Cache-Control: private,max-age=86400

My understanding is that the browser should not even ask for this file for 24 hours (86,400 = 60s * 60m * 24h).

What I'm seeing on subsequent requests is that it still asks for the file, but gets back a "304 Not Modified." This is good, but I want to remove even that request/response.

What header is required to prevent the browser from even bothering to ask for the file, and just have it blindly use the file it has in local cache, until that file expires?

Answer 1

I'm not that familiar with controlling caching, but from what I've read from the YAHOO! Dev Blog, you might want to use Expires rather than Cache-Control for static content - e.g., images.

Answer 2

This simply can't be done reliably in HTML < 5.

You could use client side storage in HTML5 or use a browser extension such as Gears to provide this functionality.

Answer 3

It all really depends on how you're testing this. On Firefox 3.6 and IE8, clicking on a link and then on a link that move you back to the first page will use the cache correctly with max-age. Hitting the Return key again in the URL field will show the same behavior.

However, hitting F5 will ask again for the file but allows 304 responses.

Hitting Ctrl+F5 will always ask again for the file, with Cache-Control and Pragma set to no-cache, forcing a 200 response.