HTML5 : introduction à l’API Web Storage
Publié le par Parmi les nombreuses nouvelles APIs apportées par le HTML5, il y a l’API Web Storage. Comme son nom l’indique, cette API se charge du stockage de données et est en quelque sorte une évolution des bons vieux cookies. En effet, si la taille maximale d’un cookie est de 4 kilo-octets, l’API Web Storage permet de stocker jusqu’à 5 méga-octets. Autre différence par rapport aux cookies, les données sont stockés exclusivement dans le navigateur et ne transitent pas jusqu’au serveur lors des requêtes (pour rappel, les cookies passent dans l’en-tête HTTP).
Cette API expose deux objets dans le langage JavaScript :
- sessionStorage : les données sont stockés par session, et sont conservés jusqu’à ce que cette session expire. Ces données sont accessibles quelque soit la page du site.
- localStorage : les données sont stockés par page, et sont ici conservés indéfiniment, même après fermeture du navigateur.
Dans cet article, nous nous servirons uniquement de l’objet localStorage. L’API Web Storage est supporté sur tous les navigateurs récents. Seul différence, Internet Explorer et Edge semble offrir 10 méga-octets de stockage au lieu de seulement 5 pour les autres.
Codons !
Commençons par une page HTML toute simple contenant un champ texte et un bouton :
<!DOCTYPE html>
<html>
<head>
<title>LocalStorage API test</title>
<meta charset="utf8" />
</head>
<body>
<textarea id="txtTexte" cols="50" rows="5"></textarea><br />
<button id="btnSauver">Sauver</button>
<script type="text/javascript">
// Attache une fonction à l'évènement "input" qui sauvegardera
// le contenu.
document.getElementById("btnSauver").addEventListener("click", function() {
var txtTexte = document.getElementById("txtTexte");
localStorage.setItem("contenu", txtTexte.value);
alert("Le texte est sauvegardé.");
}, false);
</script>
</body>
</html> Dans ce code, nous attachons une fonction à l’événement « click » de notre bouton « Sauver ». Au clic sur le bouton, la fonction setItem() de l’objet localStorage est appelé et sauvegardera le contenu. Cette fonction prend une paire clef/valeur en guise de paramètres. Ici, nous avons choisi « contenu » pour la clef.
Dans la page, modifiez le texte et cliquez sur le bouton « Sauver ». Pour voir les modifications, ouvrez les outils de développements de votre navigateur (en général accessible en pressant la touche F12). Selon les navigateurs, la marche à suivre diffère :
- Sous Chrome, allez dans l’onglet « Resources », puis dans le volet de gauche, dépliez « Local Storage » et sélectionnez votre page;
- Sous Firefox, allez dans l’onglet « Stockage », puis dans le volet de gauche, dépliez « Stockage local » et sélectionnez votre page;
Ici dans Firefox, nous voyons bien le texte sauvegardé :
Nous sommes en mesure de sauvegarder quelque chose, mais nous ne pouvons pas encore récupérer ce qui est sauvegardé. Si vous rafraîchissez la page HTML, vous constaterez que le champ texte sera vide, alors que le texte sauvegardé sera toujours présent.
Nous allons donc enrichir notre code qui remplacera le contenu original de la div par le texte sauvegardé. Pour cela, nous ferons appel à la fonction getItem() de l’objet localStorage en spécifiant la clef « contenu », soit là où nous avons sauvegardé notre texte précédemment.
Juste avant l’appel à addEventListener(), ajoutez le code suivant :
// Récupère le contenu sauvegardé.
var txtTexte = document.getElementById("txtTexte");
var strContenu = localStorage.getItem("contenu");
if (strContenu !== null) {
// Place ce contenu dans la div.
txtTexte.value = strContenu;
}
Fermez, puis rouvrez la page HTML. Vous constaterez que le texte sauvegardé est affiché dans le champ texte. Avec l’objet sessionStorage, la sauvegarde aurait été effacée à la fermeture de la page.
Pour finir cet exemple, nous allons maintenant voir comment effacer la sauvegarde. Pour cela, commençons par ajouter un nouveau bouton :
<button id="btnEffacer">Effacer</button>Puis, ajoutons le code de l’événement du clic sur le bouton :
// Attache une fonction à l'évènement "click" du bouton "Effacer" pour effacer le
// contenu et la sauvegarde.
document.getElementById("btnEffacer").addEventListener("click", function() {
var txtTexte = document.getElementById("txtTexte");
txtTexte.value = "";
localStorage.removeItem("contenu");
alert("Le texte est effacé.");
}, false);
Rafraîchissez de nouveau la page et cliquez sur le bouton « Effacer ». Le champ texte sera vidé et la sauvegarde sera effacée. Vous pouvez d’ailleurs le vérifier dans les outils de développement de votre navigateur, où en actualisant la page une nouvelle fois :
Pour finir…
C’est ici que l’article s’achève. Je vous invite d’ailleurs à consulter ces quelques pages pour de plus amples informations :
- Web Storage API sur le site du Mozilla Developer Network, où vous trouverez plus de détails sur les spécifications de l’API.
- Une démonstration sur le site html5demos.com, assez similaire à ce que nous avons vu dans cet article, qui utilise « localStorage » et « sessionStorage ». Avec cette démo, vous pourrez constater les différences de fonctionnement entre ces deux objets.