javascript - How to implement cache for Ajax requests - Stack Overflow

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.

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.

• javascript
• ajax
• caching
• jquery

Share Improve this question Follow edited Aug 12, 2012 at 10:37 hippietrail 17k2121 gold badges109109 silver badges179179 bronze badges asked Apr 2, 2009 at 9:48 Jakub ArnoldJakub Arnold 87.3k9292 gold badges236236 silver badges334334 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Take a look at these jQuery plugins:

• http://plugins.jquery./project/cache
• http://plugins.jquery./project/Tache
• http://plugins.jquery./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();

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.

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

http://plugins.jquery./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");

});

You can create one or two classes to encapsulate the fact that you are caching; you can then use either AJAX or cache interchangeably. See here: http://myok12.wordpress./2011/08/19/building-an-almighty-data-retrieval-system-for-all-html5-webapps/