Caching AJAX Results in JavaScript

AJAX is an awesome tool. AJAX requests are usually faster than regular page loads and allow for a wealth of dynamism within a page. Unfortunately many people do not properly cache request information when they can. Let me show you how I cache AJAX requests — it’s super easy!

My example will use my TwitterGitter plugin to grab a user’s tweets. Once we have the user’s tweet information, we pull it from cache instead of making a duplicate AJAX request.

//our cache object

var cache = {};

var formatTweets(info) {  

//formats tweets, does whatever you want with the tweet information

};

//event

$('myForm').addEvent('submit',function() {

var handle = $('handle').value; //davidwalshblog, for example

var cacheHandle = handle.toLowerCase();

if(cache[cacheHandle]) {

formatTweets(cache[cacheHandle]);

}

else {

//gitter

var myTwitterGitter = new TwitterGitter(handle,{

count: 10,

onComplete: function(tweets,user) {

cache[cacheHandle] = tweets;

formatTweets(tweets);

}

}).retrieve();

}

});

Note that before we make the AJAX request, we check the cache object to see if we’ve saved this key’s (the key, in this case, is the username because it is unique) information. If so, avoid the repetitive AJAX request and simply return the cached information. If the key does not exist, make the AJAX request and save the result to the cache.

Clearing the cache periodically is easy too!

(function() { cache = {}; }).periodical(1000 * 60 * 10); //10 minutes