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

Question

I am implementing a Javascript module manager that loads javascript files via XHR object. The problem of this method is resources caching:

• Firstly, XHR rely on in-built browser caching mechanism which is OK but it's behaviour depends on the browser implementation.
• Also there is a localStorage and there is a basket.js which uses localStorage to cache downloaded scripts, the problem is in limited size of storage which is usually 5-10MB. Besides, localStorage is a shared place for many scripts which also use it to store data.
• And there is a Cache interface of the ServiceWorker API, but it is available only in ServiceWorker runtime so it doubtingly fit my needs.

Do anyone know some smart old or new javascript caching technique he's using in his project, or maybe heard of?

Note: Please, don't propose to use jQuery .ajax which is an interface to XHR, or any other library that implements an interface to in-built Javascript features.

Edit: There have been some valuable proposes:

• Use library called localForage. The library represents a unified API to IndexedDB, WebSQL and localStorage, which one is used depends on browser.
• Use IndexedDB which is truly powerfull storage with no significant space limits. The only concern is that only modern browsers implement IndexedDB.

Answer 1

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.

Answer 2

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