What are possible techniques to cache an Ajax response in Javascript? [closed]

This is specific for JQUERY....

Your can make ajax set up as cached.

    $.ajaxSetup({ cache: true});

and if for specific calls you don't want to make cached response then call

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

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

If you want to store the result of ajax response, you can make use of Local Storage. All the modern browsers provides you storage apis. You can use them (localStorage or sessionStorage) to save your data.

All you have to do is after receiving the response store it to browser storage. Then next time you find the same call, search if the response is saved already. If yes, return the response from there; if not make a fresh call.

Smartjax plugin also does similar things; but as your requirement is just saving the call response, you can write your code inside your jQuery ajax success function to save the response. And before making call just check if the response is already saved.

Since indexeddb is a method used for storing data client-side, allows indexed database queries.

And this are the supported browsers http://caniuse.com/#feat=indexeddb

And this are the only issues

Firefox (prior to version 37) and Safari do not support IndexedDB inside web workers.Not supported in Chrome for iOS or other iOS WebViews.Chrome 36 and below did not support Blob objects as indexedDB values.

Here is another similar polyfill you can try, but in my (albeit limited) experience, both polyfills are buggy/incomplete. They both also have many open issues on GitHub of people reporting problems. And when I tested one of them (I forget which one) it was significantly slower than native IndexedDB.

Maybe it's possible to create a decent polyfill, but the current ones don't seem to be doing the job.

Should I use WebSQL which was deprecated?

The problem with WebSQL is that it's never going to be supported in IE or Firefox. You could probably get away with WebSQL if you're only targeting mobile browsers, at least until Firefox OS or Windows Phone grabs significant market share.

Are there any plans to support IndexedDB in the future for all the non-supported browsers?

Let's be clear. You're asking about Apple, since everyone else supports IndexedDB in their latest browser (iOS Chrome uses Apple's rendering engine because Apple won't let them do anything else).

Not only does Apple not support IndexedDB, they haven't publicly said anything about it (as far as I can tell... and I have done a fair amount of searching). Which seems pretty weird. So as best I can tell, nobody has any idea if Apple ever plans to support IndexedDB. The conspiracy theorist in me thinks maybe they're trying to sabotage HTML5 apps to force people to write native apps, but that's purely speculation.

In total, this leaves us developers in a pretty shitty situation. There is no good cross-platform solution. I recommend you complain to Apple about it. That's what I've done, and I've asked my users who want to use my IndexedDB-based app on iOS to do the same. Still no word from Apple.

UPDATE - Indexeddb is now supported in iOS 8 as stated in WWDC 2014 - but unfortunately it's broken pretty badly.

Considerin also that Subresource Integrity -

Subresource Integrity enables browsers to verify that file is delivered without unexpected manipulation.

Does not have knowissues? so far ?

The i will suggest that you can go with

Subresource based solution if mobile is your main target

indexeddb if mobile is not your main target and use of the publicly available implementations for mobile

If all of the above sound too complex for you then

var localCache = {    data: {},    remove: function (url) {        delete localCache.data[url];    },    //a cached version exists    exist: function (url) {        return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);    },    get: function (url) {        console.log('Getting in cache for url' + url); //log only!        return localCache.data[url].data;    },    set: function (url, cachedData, callback) {        localCache.remove(url);        localCache.data[url] = {            _: new Date().getTime(),            data: cachedData        };        if ($.isFunction(callback)) callback(cachedData);    },    timeout: 600, //in seconds};$.ajaxPrefilter(function (options, originalOptions, jqXHR) {    if (options.cache) {        var complete = originalOptions.complete || $.noop,            url = originalOptions.url;        //remove jQuery cache as you have your own localCache        options.cache = false;        options.beforeSend = function () {            if (localCache.exist(url)) {                complete(localCache.get(url));                return false;            }            return true;        };        options.complete = function (data, textStatus) {            localCache.set(url, data, complete);        };    }});$(function () {    var url = 'your url goes here';    $('#ajaxButton').click(function (e) {        $.ajax({            url: url,            data: {                test: 'value'            },                cache: true,                complete: doSomething            });        });    });    //ToDo after ajax call finishes, or cached version retrived    function doSomething(data) {        console.log(data);    }

Another specific JQUERY answer ?

Not sure it answers your question but that could help. It s caching ajax calls with a timeout.

In the prefiltering, list the various PHP ajax calls you want to add for caching.In this example, cache is enabled with a 10 minutes timeout.

/*----------------------------*//* set ajax caching variables *//*----------------------------*/$.set_Ajax_Cache_filters = function () {    var localCache = {        timeout: 600000, // 10 minutes        data: {}, //@type {{_: number, data: {}}}        remove: function (url) {            delete localCache.data[url];        },        exist: function (url) {            return !!localCache.data[url] && ((new Date().getTime() - localCache.data[url]._) < localCache.timeout);        },        get: function (url) {            return localCache.data[url].data;        },        set: function (url, cachedData, callback) {            localCache.remove(url);            localCache.data[url] = {                _: new Date().getTime(),                data: cachedData            };            if ($.isFunction(callback))                callback(cachedData);        }    };    /*----------------------*/    /* set ajax pre filters */    /*----------------------*/    $.ajaxPrefilter(function (options, originalOptions, jqXHR) {        // list of allowed url to cache        if (url !== '..............file.php') {            return false;        }        if (options.cache) {            var complete = originalOptions.complete || $.noop,                    url = originalOptions.url;            options.cache = false;//remove jQuery cache using proprietary one            options.beforeSend = function () {                if (localCache.exist(url)) {                    complete(localCache.get(url));                    return false;                }                return true;            };            options.complete = function (data, textStatus) {                localCache.set(url, data, complete);            };        }    });};