HTML - Web Storage : Votre Passerelle pour le Stockage Côté Client

Bonjour à tous, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du stockage Web HTML. En tant que votre enseignant de informatique bienveillant du coin, je suis ravi de vous guider à travers cet aspect crucial du développement web moderne. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongeons dedans !

HTML - Web Storage

Qu'est-ce que le Web Storage ?

Avant de rentrer dans les détails, comprendre ce qu'est le Web Storage. Imaginez que vous construisez une cabane dans les arbres et que vous avez besoin d'un endroit pour stocker vos outils. Le Web Storage est comme cette petite compartiment secrète dans votre cabane où vous pouvez conserver des informations importantes pour une utilisation ultérieure. En termes de développement web, c'est un moyen de stocker des données côté client (c'est-à-dire dans le navigateur de l'utilisateur) sans recourir aux cookies.

Types de Web Storage

Revenons maintenant aux deux principaux types de Web Storage :

Stockage de session
Stockage local

Pensez à eux comme à deux tiroirs différents dans votre compartiment secret de la cabane. Ils servent des objectifs similaires mais ont quelques différences clés. Exploquons-les :

Stockage de session

Le stockage de session est comme un carnet temporaire. Il stocke des données pour une seule session, et une fois que vous fermez l'onglet ou la fenêtre de votre navigateur, pouf ! Les données disparaissent comme par magie.

Stockage local

Le stockage local, quant à lui, est plus comme un journal. Les informations que vous écrivez ici restent en place même après que vous avez fermé votre navigateur. Elles sont là, attendant votre retour, comme votre fidèle journal sur votre table de chevet.

Exemples de Web Storage HTML

Mettons les mains dans le cambouis avec un peu de code ! Nous allons commencer par le stockage de session, puis passer au stockage local.

Exemple de Stockage de Session

<!DOCTYPE html>
<html>
<head>
<title>Fun avec le Stockage de Session</title>
</head>
<body>
<h1>Bienvenue à la Fête du Stockage de Session !</h1>
<button onclick="saveData()">Enregistrer mon nom</button>
<button onclick="loadData()">Quel est mon nom ?</button>

<script>
function saveData() {
sessionStorage.setItem("userName", "Alice");
alert("Nom enregistré !");
}

function loadData() {
var name = sessionStorage.getItem("userName");
if (name) {
alert("Ton nom est " + name);
} else {
alert("Je ne connais pas encore ton nom !");
}
}
</script>
</body>
</html>

Reprenons cela :

Nous avons deux boutons : un pour enregistrer des données et un pour charger des données.
La fonction saveData() utilise sessionStorage.setItem() pour stocker le nom "Alice".
La fonction loadData() utilise sessionStorage.getItem() pour récupérer le nom stocké.
Si tu fermes l'onglet et que tu le rouvres, le nom aura disparu. C'est ainsi que fonctionne le stockage de session !

Exemple de Stockage Local

Maintenant, ajustons notre exemple pour utiliser le stockage local :

<!DOCTYPE html>
<html>
<head>
<title>Aventure du Stockage Local</title>
</head>
<body>
<h1>Bienvenue dans le Royaume du Stockage Local !</h1>
<button onclick="saveData()">Souviens-toi de ma couleur favorite</button>
<button onclick="loadData()">Quelle est ma couleur favorite ?</button>

<script>
function saveData() {
localStorage.setItem("favoriteColor", "Bleu");
alert("Couleur enregistrée !");
}

function loadData() {
var color = localStorage.getItem("favoriteColor");
if (color) {
alert("Ta couleur favorite est " + color);
} else {
alert("Tu ne m'as pas encore dit ta couleur favorite !");
}
}
</script>
</body>
</html>

La structure est similaire, mais notez que nous utilisons localStorage au lieu de sessionStorage. Quelle est la différence ? Ferme ton navigateur, prends une pause café, reviens, et ta couleur favorite sera toujours là !

Supprimer le Web Storage

Et si tu veux nettoyer ton stockage ? C'est comme faire le grand nettoyage de printemps pour ton application web ! Voici comment tu peux le faire :

// Supprimer un élément spécifique
sessionStorage.removeItem("userName");
localStorage.removeItem("favoriteColor");

// Effacer tous les éléments
sessionStorage.clear();
localStorage.clear();

Méthodes du Web Storage

Résumons les méthodes que nous avons apprises dans un tableau bien rangé :

Méthode	Description
setItem(key, value)	Ajoute une paire clé/valeur au stockage
getItem(key)	Récupère une valeur par clé
removeItem(key)	Supprime un élément par clé
clear()	Supprime tous les éléments du stockage

Pourquoi Choisir le Web Storage Plutôt que les Cookies ?

Maintenant, vous pourriez vous demander, "Pourquoi se soucier du Web Storage alors que nous avons des cookies ?" Excellent pregunta ! Laissez-moi vous donner quelques raisons convaincantes :

Capacité : Le Web Storage peut contenir beaucoup plus de données que les cookies. C'est comme passer d'une petite boîte à un grand placard !
Sécurité : Les données du Web Storage ne sont pas envoyées avec chaque requête HTTP, contrairement aux cookies. C'est comme garder ton journal à la maison plutôt que de le trimballer partout.
Facilité d'utilisation : Le Web Storage a une API simple et intuitive. C'est comme utiliser un smartphone moderne plutôt qu'un ancien téléphone rotatif.
Performance : Stocker des données localement peut rendre tes applications web plus rapides. C'est comme avoir un placard dans ta classe au lieu de courir jusqu'à la pièce de stockage chaque fois que tu as besoin de quelque chose.

Conclusion

Et voilà, amis ! Nous avons fait le voyage à travers le pays du stockage Web HTML, des royaumes temporaires du stockage de session aux royaumes pérennes du stockage local. Nous avons appris à sauvegarder, à récupérer et à supprimer des données, et pourquoi le Web Storage est souvent un meilleur choix que les cookies.

N'oublie pas, comme avec tout outil puissant, utilise le Web Storage avec sagesse. Ne stocke pas des informations sensibles comme les mots de passe ou les numéros de carte de crédit. Il est destiné à améliorer l'expérience utilisateur, pas à protéger Fort Knox !

Alors, continue ton aventure en développement web, et tu trouveras des moyens créatifs innombrables d'utiliser le Web Storage. Peut-être l'utiliseras-tu pour remember les préférences d'un utilisateur, sauvegarder la progression d'un jeu ou stocker des données hors ligne. Les possibilités sont aussi illimitées que ton imagination !

Allez, expérimente, et puissent tes applications web être toujours conviviales et performantes. Bon codage, futurs magiciens du web !

Credits: Image by storyset

Tutoriel précédent:

HTML - WebSocket

Tutoriel suivant:

HTML - Events serveur