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 temporizzazione della cache, ma prima di farlo dovremmo sempre conoscere il tempo medio di permanenza su una pagina dei nostri visitori.
La soluzione è la seguente:
var getFeed = function( url, query ) {
var storage = sessionStorage;
if( storage.getItem( "feed" ) === null ) { // La cache è vuota
$.when( $.get( url, query ) ).done(function( response ) {
var html = "";
// Costruisco la stringa HTML da response
$( "#output" ).html( html );
storage.setItem( "feed", html ); // Creo la cache
});
} else {
// Uso la cache
$( "#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.