How and for how long do browsers store Etags?

Question

I wish to implement ETag based cache-control, and I am wondering how long ETags are stored in a browser and if they can be kept for longer than the current session.

I have the server setting and sending ETags for responses correctly, and I am sending requests from the browser with jQuery.ajax.

The system works correctly, responding with the appropriate 304 response if the Not-Modified header (previous ETag) matches the generated ETag on the server. This all works fine for the current session, however when I close the browser and reopen it, the Not-Modified header is not being sent by jQuery any more.

I am wondering if there are any methods I could use to trigger the default browser behaviour, and send the Not-Modified header for responses (if applicable), without manually setting the header in the ajax request or storing the ETag in localStorage/indexedDb.

Answer 1

An Etag must be accompanied by other tags that tell the browser how long to hold the content

https://developers.google.com/speed/docs/best-practices/caching?csw=1#LeverageBrowserCaching

It is important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources. It is redundant to specify both Expires and Cache-Control: max-age, or to specify both Last-Modified and ETag.

So it all depends on the duration you specify with the Expires or max-age tag on how long the browser will hold it

The only purpose of the etag is so that the browser can issue a "if modified" request after the initial expiration period to see if the content has actually changed or gets back a 304 not modified.

Badly managed 304's can cause other problems, like unnecessary and redundant 304 requests: http://calendar.perfplanet.com/2010/easy-cache-headers/