javascript - Refresh page using cache - Stack Overflow

admin管理员组

文章数量:1316663

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:.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

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./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

• javascript
• caching
• refresh

Share Improve this question Follow edited Jun 28, 2011 at 17:03 RANGER asked Jun 28, 2011 at 4:56 RANGERRANGER 1,69122 gold badges1717 silver badges3131 bronze badges 7

• 3 Maybe I'm not grasping this, but what is the point of a "refresh" if you want to retain the cache? – Brad Christie Commented Jun 28, 2011 at 5:05
• And it can be a) server expiration and/or b) client expiration (no or small cache) not to forget c) some random value added to the URL because you wanted to keep the images out of cache but forgot about it. Download firebug, click on the NET tab and see the headers – mplungjan Commented Jun 28, 2011 at 5:26
• @Brad - Specifically, it is for a media thumbnail page. After I upload a new image within an AJAXed iFrame I want to refresh the page... but each time I do it reloads ALL the images on the page NOT from the server. Technically it should only have to load the newly uploaded image. – RANGER Commented Jun 28, 2011 at 5:30
• @cbh: that's a different question! You want to cache the images in the client – Florian Commented Jun 28, 2011 at 5:32
• @mplungjan - Thanks, it's not a client-side expiration issue since it has no problem using the cache for the (whole) page until I hit the refresh button. There are no query strings or anything after the filename... as for server expiration, so would this be an htaccess fix? – RANGER Commented Jun 28, 2011 at 5:33

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 5

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.

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

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

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

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.

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.

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 ing from.

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

本文标签： javascriptRefresh page using cacheStack Overflow