Force a page cache of Ajax content

Question

I have a page that is an search where the results are loaded via ajax. It then lists products on a page and you can click to view each product. I'd like to change this page where after you view a product if you click "back" on your browser it'll load the cache instead of forcing the user to search again.

Note: I'm not looking for an ajax cache, but a simple browser cache header

How can I achieve this?

I currently have....

header('Cache-Control: private, max-age:3600');
header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));

and it doesn't load the cache

Answer 1

You might want to use the jQuery history plugin. See the demo

Answer 2

Rather than capturing the "back" button on the browser or relying on Javascript (never a good idea), I would suggest using your session to save results. What I typically do for search results is save the formatted results to the session for quick reloading (for situations like the one you described, returning after viewing a detail page) and replace it anytime they do a new search so that you don't have massive amounts of session data piling up.

When you load the page, check for any POST data (or GET, however you're doing it) and then check the session to see if a recent search was done using that data. This will speed things up and take some of the traffic off of your database.

Answer 3

Nice article about the problem and it's solution: http://asciicasts.com/episodes/175-ajax-history-and-bookmarks