Comment utiliser le stockage local et persistant dans le navigateur avec HTML5

Et on continue à monter en puissance dans votre apprentissage du langage HTML5.

Profitez, vous aussi, d’une nouveauté HTML5, à savoir le stockage persistant de données en local, directement dans le navigateur.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser le stockage local et persistant dans le navigateur avec HTML5

Bonjour à tous et bienvenu sur Développement Facile.

Vous avez dû voir certainement, 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, et c’est ce que nous allons voir à travers cette nouvelle propriété HTML 5 le stockage des éléments de votre site Internet dans le navigateur du client.

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 la possibilité une, 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é, du stockage persistant, les données sont toujours stockées en locales par le navigateur pour une durée indéfinie, donc quand 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 clé, valeur, vous pouvez récupérer une valeur stockée avec sessionStorage.getItem la clé, vous pouvez supprimer une valeur stockée avec sessionStorage.removeItem la clé, et vous pouvez supprimer toutes les valeurs stockées avec session.Storage.clear.

Le stockage persistant

Pour le stockage persistant, c’est exactement la même chose, regardez 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, vous avez 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.

Votre plan d’actions !

Je vous montre un exemple de code source, ce sera beaucoup plus parlant, là c’est du stockage persistant, il y a un peu de CSS pour la mise en forme, et vous avez un exemple de code source avec des produits, des données au niveau du stockage, je vous montre l’exemple avec une formation, une quantité, là c’est du stockage persistant, et c’est votre liste de formation, tout simplement. Avec la formation et les quantités à stocker, le nom de la formation, qu’est-ce que ça donne ?
Je vous montre directement un effet visuel, vous choisissez votre formation, par exemple PHP expert, une, et vous faites ajouter, après vous pouvez choisir autre chose, et quantité une, ajouter, qu’est-ce qu’on peut mettre ?
HTML 5, quantité 10, ajouter, CSS3, quantité 2, ajouter, vous pouvez bien évidemment modifier une quantité, donc vous mettez HTML 5, voilà, vous avez modifié, il suffit de reprendre JavaScript, vous cliquez sur modifier, vous mettez votre chiffre, vous faites ajouter et il se modifie, donc je ferme le navigateur, je le ré-ouvre, et voyez que toutes les valeurs sont conservées lorsque l’utilisateur ferme son navigateur.

Vous pouvez également supprimer des valeurs, tout simplement, en les reprenant, modifier, supprimer, ajouter une valeur formation test, 16, ajouter.

Vous avez eu un exemple d’utilisation du stockage en local, du stockage temporaire, ça va donner encore un plus, une option supplémentaire à vos sites Internet, retrouvez en téléchargement le code source sous cette vidéo, comme je vous l’ai dit, HTML 5 propose énormément de nouvelles possibilités pour vos sites Internet, utilisez-les, si vous avez des questions, posez-les directement sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple HTML5

Retrouver le code source d’une application HTML5 qui utilise le stockage de données localement dans le navigateur.

Comment utilisez-vous cette nouvelle possibilité avec HTML5 ?

Partagez dans les commentaires, les applications et les fonctionnalités que vous avez implémentez grâce au stockage persistant.