How to implement cache for Ajax requests

Question

I have simple application, that shows list of many items, where user can display detail for each item, which is obtained by Ajax.

However, if user closes the detail and opens again, application makes another Ajax request, to get the same content again.

Is there any simple solution how to prevent this by caching requests on client, so when the user displays the same detail again, the content will be loaded from cache. Preferably using jQuery.

I think this could be solved with proxy object, which would store request when its made for the first time, and when the request is made again, proxy will just return previous result without making another Ajax request.

But I'm looking for some simpler solution, where I won't have to implement all this by myself.

Answer 1

Take a look at these jQuery plugins:

• http://plugins.jquery.com/project/cache
• http://plugins.jquery.com/project/Tache
• http://plugins.jquery.com/project/jCache

jQache sample:

// [OPTIONAL] Set the max cached item number, for example 20
$.jCache.maxSize = 20; 
// Start playing around with it:
// Put an item into cache:
$.jCache.setItem(theKey, theValue);
// Retrieve an item from cache:
var theValue = $.jCache.getItem(theKey);
// Clear the cache (well, I think most of us don't need this case):
$.jCache.clear();

Answer 2

IMHO simplest way is to create a global array:

var desc_cache=[];

and then create a function like this:

function getDesc(item){
if(desc_cache[item]) return desc_cache[item] else $.ajax(...);
}

After getting ajax data save results to desc_cache.

Answer 3

Another jQuery cache plugin where you can set expiration and dependencies on objects:

http://plugins.jquery.com/project/jCacher

jCacher sample code:

$(document).ready(function() {

    $.jCacher.add("key", "value");

});

$(document).ready(function() {

    var cacheItem = $.jCacher.get("key");
    alert(cacheItem.value + " was retrieved from the cache");

});