CODEWITHSUNDEEP
javascriptajaxcachingjquery
Jakub Arnold
Jakub Arnold

Reputation: 87260

How to implement cache for Ajax requests

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.

Upvotes: 4

Views: 2864

Answers (4)

Ohad Kravchick
Ohad Kravchick

Reputation: 1162

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.com/2011/08/19/building-an-almighty-data-retrieval-system-for-all-html5-webapps/

Upvotes: 0

Andreas B
Andreas B

Reputation: 11

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");

});

Upvotes: 1

Konstantin Tarkus
Konstantin Tarkus

Reputation: 38428

Take a look at these jQuery plugins:

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();

Upvotes: 2

Thinker
Thinker

Reputation: 14464

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.

Upvotes: 2

Related Questions