Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I would like to enable caching of an ajax response in javascript/browser.

From the jquery.ajax docs:

By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache to false. To cause the request to report failure if the asset has not been modified since the last request, set ifModified to true.

However, neither of these address forcing caching.

Motivation: I want to put $.ajax({...}) calls in my initialisation functions, some of which request the same url. Sometimes I need to call one of these initialisation functions, sometimes I call several.

So, I want to minimise the requests to the server if that particular url has already been loaded.

I could roll my own solution (with some difficulty!), but I would like to know if there is a standard way of doing this.

share|improve this question
I wouldn't have thought it difficulty to track which URLs you've already loaded and store the results against that list. Then, you can check your URLs before you make an AJAX call. Voila - you have your own basic cache. – Mike W Jun 14 at 8:33
you could add the cache-control and expires header to your response on the server, so your server should only be called after the timeout you configured in that values – hereandnow78 Jun 14 at 8:37

2 Answers

up vote 2 down vote accepted

cache:true only works with GET and HEAD request.

You could roll your own solution as you said with something along these lines :

var localCache = {
    data: {},
    remove: function (url) {
        delete localCache.data[url];
    },
    exist: function (url) {
        return localCache.data.hasOwnProperty(url) && localCache.data[url] !== null;
    },
    get: function (url) {
        console.log('Getting in cache for url' + url);
        return localCache.data[url];
    },
    set: function (url, cachedData, callback) {
        localCache.remove(url);
        localCache.data[url] = cachedData;
        if ($.isFunction(callback)) callback(cachedData);
    }
};

$(function () {
    var url = '/echo/jsonp/';
    $('#ajaxButton').click(function (e) {
        $.ajax({
            url: url,
            data: {
                test: 'value'
            },
            cache: true,
            beforeSend: function () {
                if (localCache.exist(url)) {
                    doSomething(localCache.get(url));
                    return false;
                }
                return true;
            },
            complete: function (jqXHR, textStatus) {
                localCache.set(url, jqXHR, doSomething);
            }
        });
    });
});

function doSomething(data) {
    console.log(data);
}

Working fiddle here

share|improve this answer
is there a reason you put a callback on the localCache.set function? Why not simply doSomehing(jqXHR) after setting the cache? – cammil Jun 16 at 15:11
I just prefer it this way so I don't have to do something like doSomething(localCache.set(url,jqXHR)); but it's just personnal preference – TecHunter Jun 17 at 6:40
up vote 0 down vote

If I understood your question here is the solution. 

    $.ajaxSetup({ cache: true});

and for specific calls

 $.ajax({
        url: ...,
        type: "GET",
        cache: false,           
        ...
    });

If you want opposite (cashe for specific calls) you can set false at the begining and true for specific calls

share|improve this answer
that's exactly the opposite – TecHunter Jun 14 at 8:36
I have edited the answer – spring Jun 14 at 8:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.