HTML Web Storage
Auparavant, canvas était une bitmap vide peinte par JavaScript. Cette leçon quitte le dessin et présente Web Storage : mémoriser de petites chaînes clé/valeur dans le navigateur avec localStorage et sessionStorage. HTML charge toujours un script ; ce script appelle les API de stockage. Portée pratique — enregistrer/lire et durée de vie — pas cookies, IndexedDB ni base serveur.
Pourquoi web storage dans un cours HTML
Les débutants veulent qu’un thème ou un nom survive au rechargement. Web Storage est le premier outil courant. Après canvas, la division diffère : HTML possède l’enveloppe ; JS la mémorisation de chaînes pour cette origine. Suffisent setItem, getItem et local vs session.
Réponse directe
1) localStorage.setItem enregistre une chaîne. 2) getItem la lit. 3) localStorage jusqu’à effacement. 4) sessionStorage pour l’onglet/session. 5) Aucune balise HTML ne remplace les API. 6) Préférences légères seulement ; les objets nécessitent JSON car les valeurs sont des chaînes.
📊 localStorage vs sessionStorage
| Topic | localStorage | sessionStorage |
|---|---|---|
| Typical lifetime | Until cleared by user/site/code | Until the tab/session ends |
| Survives browser restart | Usually yes (same origin) | No |
| Shared across tabs (same origin) | Yes (same storage) | No (per tab/session) |
| API shape | setItem / getItem / removeItem | Same method names |
| Beginner fit | Theme, language preference | One-tab wizard draft, temp flags |
| This course depth | Intro save/read only | Intro save/read only |
Minuscule démo localStorage
Un clic enregistre une salutation et l’affiche dans un paragraphe. Après rechargement, getItem retrouve encore la valeur pour cette origine — l’idée « local ».
<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>
Lire les appels localStorage
- localStorage est un objet navigateur pour les scripts de page
- setItem stocke la chaîne sous une clé
- getItem la lit (ou null)
- L’affichage dans p prouve la persistance sans dessiner (contrairement à canvas)
- Clés et valeurs sont des chaînes
- Effacer : removeItem ou DevTools
sessionStorage pour données d’onglet seul
Mêmes noms de méthodes, durée plus courte. Utile pour un brouillon d’un onglet qui disparaît à la fermeture.
<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>
Lire l’idée sessionStorage
- Même motif setItem/getItem
- Restauré au rechargement dans le même onglet
- Un autre onglet ne voit pas les mêmes données
- Toujours des chaînes ; pas pour mots de passe
- Choisissez local vs session selon la durée
- Ensuite : geolocation
Que stocker
- Thème/langue : localStorage
- Drapeau d’assistant cet onglet seulement : sessionStorage
- Secrets : ni l’un ni l’autre
- Gros fichiers : hors de cette intro
- Comptes serveur : backend
- Dessiner des pixels : c’était canvas
Pratique — mémoriser une préférence
- Collez la démo localStorage et enregistrez.
- Rechargez ; confirmez la restauration.
- Testez sessionStorage dans le même onglet.
- Fermez l’onglet et rouvrez.
- Stockez un nombre — revient en chaîne.
- Phrase : canvas peint des pixels ; Web Storage enregistre des chaînes.
- Aperçu : geolocation.
Erreurs faciles
- Attendre une balise storage
- Stocker des mots de passe
- Oublier que ce sont des chaînes (JSON pour objets)
- Confondre avec canvas ou cookies
- Croire que sessionStorage dure pour toujours
- Supposer le partage avec d’autres appareils
- Prendre l’intro pour un cours de bases de données
Résumé
- Web Storage est une API JS : localStorage et sessionStorage
- setItem/getItem enregistrent des chaînes pour votre origine
- local jusqu’à effacement ; session pour onglet/session
- Pour préférences légères — pas pour secrets
- Canvas était des pixels ; cette leçon des chaînes mémorisées
- Suivant : geolocation en HTML
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut