Tutorial: How to stop caching with jQuery and javascript

There are many reason people want to disable or stop caching by broswer. Especially when we are dealing with dynamic content that required the latest version to be displayed on the browser. However, due to security reason there are no perfect methods in javascript that can disabled caching for all browsers. In this tutorial, i will demonstrate a few way both javascript and jQuery used to stop or disable caching by browsers.

jQuery

On the later version of jQuery v1.2 above, jQuery has provided a method to stop caching by browser with its ajax class. You can visit jQuery website to see the list of update on v1.2 and you will notice that they have now included a function to disable caching! You can either choose to control the way each individual dynamic content cached by setting the properties to true/false or you can just set a default to disabled all browser caching.

In order to determine each ajax call caching properties,

$.ajax({
url: 'test.html',
cache: false,
success: function(html){
$('#results').append(html);
}
});

which is being reflected on the jQuery example. And in order to disable all caching by the browser we can do the following,

$.ajaxSetup({cache: false}});

This will have to be placed on top of the script in order for it to work.

Javascript

The reason why browsers are able to cache a particular document is due to the url being passed to the browser are identical. In order to make it unique for each passes, we can place in a random number behind the url as shown below,

var img.src = 'www.hungred.com'+'?'+Math.random()*Math.random();
return $(img).load(function()
{
alert('completed!');
});

This method will ensure all document to be unique for every dynamic passes you throw to the browser which i find it more reliable and useful as this method has been there for quite sometimes and almost all of the browser will support such way of retrieving dynamic content.

HTML (16/04/2009)

You can also disable or stop caching using  the following meta tag,

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

This will prevent the whole page from being cached by the browser as well.

Like this post? Share it!

Related posts:

1. IE, Opera and Netscape issues on ‘Stop page loading’ with javascript An article i wrote on IE,Opera an Netscape in regards...
2. Ways to debug your jQuery or JavaScript codes Different ways of debugging your JavaScript and jQuery codes without...
3. jQuery and JavaScript CSS !important In this article, we discuss jQuery and JavaScript ability of...
4. Tutorial: disable _blank attribute from opening new window Using target _blank is pretty simple we just throw it...
5. Tutorial: How to slide downwards with jQuery A Concept to force jQuery to slide downward instead of...

Author: Clay Lua

Clay is the main writer and founder of Hungred.com. A person who thinks a lot and spend majority of his time online. He spend most of his time developing web application and writing articles to share and learn. You can find him at his twitter.