Le azioni AJAX in jQuery sono molto dispendiose in termini di performance. Per questo tipo di azioni possiamo implementare un sistema di cache.
Immaginiamo di dover effettuare il parsing di un feed remoto. Ad ogni caricamento della pagina dovremmo effettuare di nuovo il parsing del feed e dovremmo anche ricreare la stringa HTML da inserire.
Un tempo per implementare questa soluzione avremmo dovuto usare i cookie. Oggi possiamo utilizzare il session storage. Potremmo anche implementare un sistema di sincronizzazione con timer della cache, ma prima di farlo dovremmo sempre conoscere il tempo medio di permanenza su una pagina dei nostri visitatori.
Possiamo usare il seguente codice:
var getFeed = function( url, query ) {
var storage = sessionStorage;
if( storage.getItem( "feed" ) === null ) {
$.when( $.get( url, query ) ).done(function( response ) {
var html = response.output;
$( "#output" ).html( html );
storage.setItem( "feed", html );
});
} else {
$( "#output" ).html( storage.getItem( "feed" ) );
}
};
In questo modo la cache resta attiva fino a quando l'utente lascia il sito o chiude il browser. Così facendo evitiamo di dover ripetere richieste HTTP non necessarie su ogni pagina.