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

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.