使用缓存刷新页面

Question

I am trying to refresh a page, but WANT to use the cache and can't figure out how to do this. There are two situations:

• If I click in the URL bar and hit enter (or visit the page from somewhere else) it reloads the page/images from the cache. GREAT!

• If I click on the refresh button or use Javascript to refresh the page it grabs all the images again and takes forever. NOT GREAT!

I've tried: top.location.reload(false); and top.location.reload(true); (I'm sending this from in an iFrame) and neither used the cache. I'm avoiding using location so it doesn't end up in the browser history twice.

Question : How do I reload the page using the cached images? Is there a different javascript function or is this a mod_expires issue?

Thanks for any help in advance!

EDIT: (info from chrome: developer tools)

• When navigating to the page I get "From Cache" for all images
• When refreshing page I get "304 - Not Modified" for all images (and it takes the time to download each)

EDIT 2: (Headers from an image, safari: developer tools)

Javascript: top.location.reload(false); (No Cache!)

Status Code:304 Not Modified

Request Headers
Cache-Control:max-age=0
If-Modified-Since:Tue, 28 Jun 2011 07:13:17 GMT
If-None-Match:"104684ae-a7d-66e41d40"
Referer:http://getdirectus.com/dev/media.php
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-us) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Response Headers
Cache-Control:max-age=157680000
Connection:Keep-Alive
Date:Tue, 28 Jun 2011 16:56:50 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:56:50 GMT
Keep-Alive:timeout=5, max=94
Server:Apache/2.0.54

Navigating to page: (Uses cache)

Status Code:200 OK

Response Headers**
Accept-Ranges:bytes
Cache-Control:max-age=157680000
Connection:Keep-Alive
Content-Length:2685
Content-Type:image/jpeg
Date:Tue, 28 Jun 2011 16:54:20 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:54:20 GMT
Keep-Alive:timeout=5, max=99
Last-Modified:Tue, 28 Jun 2011 07:13:17 GMT
Server:Apache/2.0.54

Answer 1

The documentation for window.location.reload( false ); says it will load from cache. If that isn't happening then you may be seeing a browser bug. See if you can replicate the problem in another browser.

EDIT (for your edit): You are seeing that behaviour because you don't have an Expires header set in the future. You will need to add an Expires header in Apache .

Answer 2

window.location.href = window.location.href;

If the location contains a # , be sure to remove it before setting href .

Answer 3

Your second request was initiated by manually refreshing the page. When you do this, the browser sends up an additional cache-control:max-age=0 header with the request. This is where the 304 (Not Modified) is coming from.

If you navigate within the site (using links), the browser will continue to use its cache.

Answer 4

If you want to enable caching in the client, mind sending Expire headers, eg with mod_expires

Answer 5

Using this site , I only got green image with location.refresh(true); . With location.refresh(); or location.refresh(false); I got the red image. Working ok, I guess.

Answer 6

There are two separate things to consider here:

1: the request... browser -> server

2: the response... server -> browser

When you refresh a page you cannot get around the browser doing a requests for page assets to the server.

What you can do is make sure the server sends a minimal response.

The best way to achieve this, is to use etags in your response headers. That way the browser will send a if-none-match request to the server, and get a 304 Nothing changed response back assuming nothing has been modifed.