HTML 5. Utiliser le stockage local et persistant dans le navigateur

Le stockage des éléments de votre site Internet dans le navigateur du client

Vous allez continuer à monter en puissance dans votre apprentissage du langage HTML5 !

Vous avez certainement dû le voir. Maintenant, il y a de plus en plus de sites qui sont consultables hors ligne, en tout cas une partie du site est consultable hors ligne.

C’est ce que vous allez découvrir à travers cette nouvelle propriété HTML 5:
le stockage des éléments de votre site Internet dans le navigateur du client.

Pour ce faire, vous utiliserez des fonctions JavaScript.

Stocker des données dans le navigateur

Il existe une API DOM Storage ou l’API Web Storage qui vous permet de
stocker dans le navigateur de l’ordinateur de l’internaute, plusieurs informations de votre choix. Vous avez donc deux possibilités :

sessionStorage : c’est un stockage temporaire, les données sont stockées dans le navigateur uniquement le temps de la session, donc dès que l’utilisateur ferme le navigateur toutes les données sauvegardées sont supprimées ;

localStorage : la deuxième possibilité, c’est du stockage persistant. Les données sont toujours stockées en local par le navigateur pour une durée indéfinie. Cette fois-ci, quand l’utilisateur ferme son navigateur, les données sont sauvegardées, pour être réutilisées plus tard, elles seront toujours accessibles.

Le stockage temporaire

Pour le stockage temporaire, vous avez plusieurs possibilités.

Vous pouvez ajouter une valeur sessionStorage.setItem avec un couple clé/valeur. Vous pouvez ensuite récupérer une valeur stockée avec sessionStorage.getItem et la clé que vous aviez donné dans setItem.

Enfin, vous pouvez supprimer une valeur stockée avec sessionStorage.removeItem et la clé. Vous pouvez également supprimer toutes les valeurs stockées avec sessionStorage.clear.

Exemple :

var data = document.getElementById("q").value; sessionStorage.setItem(produit, data);
document.getElementById("q").value = sessionStorage.getItem(produit);
sessionStorage.removeItem(produit); sessionStorage.clear();

Le stockage persistant

Pour le stockage persistant, c’est exactement la même chose, la seule différence c’est que dans un cas vous utilisez sessionStorage pour stockage temporaire, et dans l’autre cas pour le stockage persistant, vous utilisez localStorage.

Sinon, vous retrouvez setItem pour ajouter une valeur, getItem pour récupérer une valeur stockée, removeItem pour supprimer une valeur stockée, et clear pour supprimer toutes les valeurs stockées.

Exemple :

var data = document.getElementById("q").value; localStorage.setItem(produit, data);
document.getElementById("q").value = localStorage.getItem(produit);
localStorage.removeItem(produit); localStorage.clear()

Conclusion

Avec peu de code, vous pourrez gérer les sessions utilisateur sur votre site, ou conserver toutes les données dont l’utilisateur pourrait avoir besoin sur le long terme, même après la fermeture de son navigateur.

Finalement, avec l’utilisation du stockage en local et/ou temporaire, cela va donner encore un plus, une option supplémentaire à vos sites Internet.

Comme je vous l’ai dit, HTML 5 propose énormément de nouvelles possibilités pour vos sites Internet, utilisez-les !