Comment stocker un objet JavaScript avec HTML5 localStorage ?
L'API offre un espace de stockage plus important que les cookies et une plus grande sécurité.
L'API HTML5 localStorage est utilisée pour pouvoir stocker des informations dans la mémoire du navigateur. Elle offre un espace de stockage plus important que les cookies et une plus grande sécurité. Le stockage fonctionne selon un système de chaînes de caractères avec des couples clé/valeurs.
Il est donc impossible de stocker directement un objet JavaScript. On peut cependant transformer un objet en chaîne de caractères grâce au JSON. La méthode JSON.stringify() transforme en chaîne de caractères JSON l'objet transmis en paramètre. On peut ensuite stocker cette chaîne avec localStorage. La méthode setItem() permet de stocker un objet dans la mémoire du navigateur.
var voiture = { modele : Clio, marque Renault };
localStorage.setItem('maVoiture', JSON.stringify(voiture));
Pour récupérer le JSON, il faut faire appel à la méthode getItem() en précisant en argument la clé de l'objet. Pour transformer la chaîne de caractères JSON en objet, il faut utiliser la méthode JSON.Parse(). On rajoute un test de la valeur en booléen car cela permettra de ne pas appeler la méthode JSON.Parse() pour une valeur vide, sinon une exception de type SyntaxError serait émise.
voitureJSON = localStorage.getItem('maVoiture');
voiture = voitureJSON && JSON.Parse(voitureJSON);
Il est possible d'utiliser ces codes pour créer des méthodes qui étendent l'API localStorage. On peut ainsi les utiliser plus facilement dans son application.
Storage.prototype.setObjet = function(cle, objet) { this.setItem(cle, JSON.stringify(objet)); } Storage.prototype.getObject = function(cle) { var valeur = this.getItem(cle); return valeur && JSON.parse(valeur); } //Utilisation var voiture = { modele : Clio, marque Renault }; localStorage.setObjet('maVoiture', voiture); voiture = localStorage.getObjet('maVoiture');