Utiliser le LocalStorage pour mettre en cache les requêtes Ajax

Utiliser le LocalStorage pour mettre en cache les requêtes Ajax

Html5, CSS3, Javascript Tutoriels

Le LocalStorage est une spécificité d’Html5 vous permettant de sauvegarder des informations directement sur le navigateur de vos visiteurs. C’est en consultant un article sur l’utilisation de ce système qu’il m’est venu l’idée suivante : Puisqu’il est possible de stocker des données sur le navigateur, pourquoi ne pas l’utiliser pour mettre en cache une partie d’un site ?

Cas pratique

Dans la sidebar de ce site, on peut trouver une section contenant les 6 derniers tweets. Celle-ci est affichée de manière asynchrone via une requête Ajax. A l’heure actuelle, un système de cache est mis en place côté serveur pour éviter de devoir récupérer le contenu sur le site de Twitter à chaque visite. Mais en y réfléchissant bien, on peut aller plus loin en stockant directement cette liste de tweets dans le navigateur ce qui aura pour conséquence de supprimer une tâche redondante au serveur.

Pour arriver à ce résultant, j’ai ainsi créé un petit plugin jQuery permettant de lancer une requête Ajax et de stocker son résultat via la technique du LocalStorage afin d’éviter de refaire cette même requête à chaque affichage des pages. Un système d’expiration des données est également présent afin de rafraichir le contenu toutes les x minutes.

Le plugin

Le plugin est simpliste et repose sur l’utilisation de la méthode $.get() de jQuery. A vous d’élargir ses possibilités afin de le rendre opérationnel dans toutes les situations.
A noter que si le navigateur ne prend pas en charge le LocalStorage, la requête Ajax est alors lancée naturellement. Autre chose, le plugin se nomme Cachax. Ce n’est pas du tout sexy mais à l’heure où j’écris cet article, il m’est impossible de trouver mieux 🙂

(function($){
   $.cachax = function(url, cacheKey, duration, callback){

      function setStorage(key, value, min){
         var expire = new Date();
         expire.setMinutes(expire.getMinutes() + (min || 0));

         localStorage.setItem(
            key, 
            JSON.stringify({
               value: value,
               expires: expire.getTime()
            })
         );
      }

      function getStorage(key){
         if( localStorage.getItem(key) != null ){
            return $.parseJSON( localStorage.getItem(key) );
         }else{
            return null;
         }
      }	

      if( ('localStorage' in window) && window['localStorage'] != null ){
		
         var stored = getStorage(cacheKey);
         var curTimestamp = new Date();

         if(stored !=null && stored.expires > curTimestamp.getTime()){
            callback.call( null, stored.value );	
         }else{
            $.get( url, function(response){
               setStorage(cacheKey, response, duration);
               callback.call( null, response );
            });
         }

      }else{
         $.get(url, callback);
      }

   }

})(jQuery);

Utilisation

$.cachax(url, idCache, expire, callback);

Les paramètres attendus sont les suivants :

  • url : adresse de la page à interroger
  • idCache : identifiant de l’objet mis en cache
  • expire : temps en minutes avant rafraichissement du cache
  • callback : fonction de retour

Exemple :

$.cachax('myTweets.php', 'tweets', 30, function(response){
   $('p').html(response);
});

A propos de l'auteur

Commentaires

  • Julio Potier le 29/04/2013 à 22:21

    Ca cache à tour de bras en ce moment :p J'aime toutes ces cachoteries :)
    Merci pour ce partage, je te tiens au courant quand j'utilise ;)

  • Benoit le 30/04/2013 à 11:57

    Belle idée. D'autant que le local storage est plutôt bien supporté (ie8+ de mémoire)

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.