find a location for property in a new city

Monday, 6 September 2010

How to force clients to hard refresh their browser cache

We had this problem when we removed our style sheets and put them into a HttpHandler to serve them all in one single request. The problem was that due to some caching problem, users' needed to refresh their page to receive the updated CSS files. This resulted in confused users looking at a non-styled site featuring trendy black Times New Roman font on a original white background with blue and purple retro links? old skool...

We (as developers) nonchalantly refreshed the page and happily continued, others didn't and we quickly realised that "Oh, they just need to refresh the page" wasn't good enough.


We needed a way to make the users refresh their browser caches, but how since we have no control over their browsers?

I came up with a bit of JavaScript that will do a hard refresh of the page and use cookies to record that it has been refresh and ensure that it only happens once and doesn't go into an infinite loop.

Here is some code I came up with:
//jquery plugin for cookies
<script type="text/javascript" src="/js/jquery/jquery.cookies.2.0.1.min.js"></script>
<script type="text/javascript">
//give it a new name each time you need to do this
var cookieName = 'refreshv1';
//check client can use cookies
if ($.cookies.test()) {
    //get the cookie
    var c = $.cookies.get(cookieName);
    //if it doesn't exist this is their first time and they need the refresh
    if (c == null) {
        //set cookie so this happens only once
        $.cookies.set(cookieName, true, { expires: 7 });
        //do a "hard refresh" of the page, clearing the cache
Feel free to work with this code but please do not use it without testing or ensuring it is right for your situation. It is merely an idea that worked for me.

Follow britishdev on Twitter


  1. It's easier to append a query string to the stylesheet link. I believe the same applies to images and javascript files too.


  2. Ha. Yeah that's true, good plan. This turned out to be a non-issue for us in the end but thought the code was still interesting

  3. Hi Colin

    Does this work the same with meta tags?

    META HTTP-EQUIV="Pragma" CONTENT="no-cache"
    META HTTP-EQUIV="Expires" CONTENT="-1"

  4. @Colin - Meta Expire will only affect the current page you are on; not what was previously cached by the browser. It works well in most cases but will not work 100% onLoad.

  5. THANK YOU SO MUCH!!! This solves my problem.

  6. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

  7. Latest sports news headlines from India and world. Check out today's most recent & up-to-date news coverage, videos & photos at
    sports news

  8. I am happy to find this post very useful for me, as it contains lot of information.

  9. Great Article
    Cloud Computing Projects

    Networking Projects

    Final Year

    Projects for CSE

    JavaScript Training in Chennai


    Training in Chennai

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals,

    Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer.

    Angular Training

  10. Excellent read, Positive site, where did u come up with the information on this posting? I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work,If anyone interested similar one's have a look here thanks.

    shih tzu puppies for sale near me
    buy puppy online