Home / Blog / Detecting when a page is loaded from the browser cache /

When a user presses the back button in their browser to return to a previous page, that page is usually loaded straight from the browser’s cache, without any requests being made to the server. When that page shows information that could be out of date (such a an old list of products in your basket) this can cause problems.

So how about we knock up a little code that allows us to determine whether the page has been loaded from the server or the browsers cache. Then we can reload those parts of the page that may need updating (such as the basket).

We can do this by setting a cookie on every response from the server, and modifying that cookie using javascript. We can then use this cookie to know whether the page has been loaded from the server or the browser cache.

##Setting the cookie on every response from the server

We will use a `loadedFromBrowserCache` cookie to facilitate the cache detection. We will set it to `false` every time a page is loaded from the server.

You can use the `BrowserCacheIndicator` class below to manage the cookie.

###BrowserCacheIndicator.cs

using System.Web;
 
namespace SevenDigital.Web.Com.Code {
	public class BrowserCacheIndicator {
		private const string CACHE_COOKIE = "loadedFromBrowserCache";
 
		// This works with the javascript on the site to determine whether
		// a page has been loaded from the browser cache
 
		// *Every time* a page is loaded from the server we need to set
		// the loadedFromBrowserCache cookie to false
 
		// This method should be called in all Master Pages
		public void ClearCacheCookie(HttpResponse response) {
			response.SetCookie(new HttpCookie(CACHE_COOKIE, "false"));
		}
	}
}

And then set the cookie in every Master page:

namespace SevenDigital.Web.Com {
	public partial class ExampleMasterPage: BaseMasterPage {
		protected readonly BrowserCacheIndicator BrowserCacheIndicator = new BrowserCacheIndicator();
 
		protected void Page_Load(object sender, EventArgs e) {
			BrowserCacheIndicator.ClearCacheCookie(Response);
		}
	}
}

##Using the cookie to know whether the page was loaded from the browser cache

The `loadedFromBrowserCache` cookie will be reset set to `false` by the HTTP Response header every time the page is loaded from the server. But it will not be reset when the page is loaded from the cache. We can use this to our advantage by setting the `loadedFromBrowserCache` cookie to `true` in javascript.

Then we know that the browser was loaded from the cache if the cookie is true on page load (because it was not reset by the server).

We just need to make sure we check the cookie before we set it to `true`!

###browser-cache.js

// Detect whether or not we are loading this page from the browser cache
// Set the value $.loadedFromBrowserCache, which other scripts can use
(function() {
	var CACHE_COOKIE = 'loadedFromBrowserCache';
	jQuery.loadedFromBrowserCache = getCookie(CACHE_COOKIE) == 'true';
	setCookie(CACHE_COOKIE, 'true');
})();

Now we have a `$.loadedFromBrowserCache<` variable that let's us know whether the page was loaded from the browser cache.

Note, the above function can run immediately, it does not need to wait for the `jQuery` `ready` event, or the `window.onload` event as it does not modify the DOM.

##Using `$.loadedFromBrowserCache` to do something useful

Now we can do something useful with the knowledge a page was reloaded from the cache. How about reloading the users basket to ensure it is always up to date:

// Reload the basket using ajax
// This is so that users still see the latest basket when using the back
// button in their browsers
$(function() {
	if ($.loadedFromBrowserCache) {
		refreshBasket();
	}
});

Enjoy!

3 Responses to “Detecting when a page is loaded from the browser cache”

  1. John Says:

    Hi there, thanks for the info. I’m trying to use this method using php for one page of site. It’s a portfolio page that is loaded with big images and a bunch of snazzy javaScript. When the user first visits the page (which is the home page) I’m showing some longer text to entertain them while all the images load. Once the images are loaded the text fades out and the gallery is shown.

    If the page has already been cached, then I’m just showing a quick “Images Loading…” message because it only takes a few seconds and having a large text block flash in and out quickly is confusing to the user.

    Anyway, I’m good on the javaScript/jQuery but I’m confused by the server-side code above (.NET?). I have the following php at the top of my page but I feel like I’m missing something that confirms a response from the server:

    Your help is appreciated! I’ve spent a few hours trying to figure this out with no luck.

    Thanks,
    John

  2. John Says:

    ahh, here’s the php. Guess your blog didn’t like my code tags:

    /*
    Makes the browser_cache_load cookie false if this page is loaded from the server
    ****************************************/

    setcookie(‘browser_cache_load’,'false’);

  3. Karl O'Keeffe Says:

    Hi John,

    Your server side PHP looks about right.

    If you are still having trouble getting this working try using a http debugging proxy such as Charles (http://www.charlesproxy.com/) to verify that the server is correctly sending the cookie.

    Then use the Chrome Inspector panel (or something similar such as Firebug) to verify the state of the cookies, and requests made to the server within the browser. You should see that the cookie is set to false by the server, and then set to true by the jQuery code. When you return to that page using the back button, you should see in Charles that no new request has been made to the server and that the cookie is now set as true.

    Let me know how you get on.