Stockage web
Le navigateur tient une courte note pour ce site. L’invité lida et la boisson tea y sont déposés, et la ligne affiche saved / lida / tea. localStorage reste après la fermeture du navigateur.
Ce n’est pas la page des motifs
Ce stockage ne s’attache pas à chaque requête que le navigateur envoie. Les cookies attendent une page plus loin. Une clé absente ne lance rien : getItem renvoie null. La page des motifs s’est arrêtée sur true / Order: mint.
Une valeur reste du texte
setItem écrit sous une clé, getItem relit. Un nombre est conservé comme du texte.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
Le journal montre tea, puis null, car size n’a jamais été écrit. Après rechargement, getItem("drink") vaut encore tea. setItem("count", 2) range les caractères 2, pas un nombre.
L’objet doit devenir du texte
Un objet simple passé à setItem devient le texte [object Object]. JSON.stringify fabrique un texte que l’on peut garder, et JSON.parse reconstruit l’objet. JSON.parse(null) lance une erreur : lis d’abord, et saute l’analyse si la valeur est null.
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
La clé w3-order contient du texte, et la valeur analysée redevient un objet. Chaque page de la même origine peut lire cette clé. Le journal donne lida / tea.
L’onglet, ou le navigateur
clear retire toutes les clés de cette origine : ne l’appelle pas seulement pour ranger une commande. removeItem retire une clé. sessionStorage possède les trois mêmes méthodes, setItem, getItem et removeItem, et vit jusqu’à la fermeture de cet onglet. localStorage est encore là quand le navigateur se rouvre.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
Fermer l’onglet ne fait tomber que la note de session. La clé w3-order de localStorage est dans les deux onglets. Un second onglet ne voit pas cette clé de sessionStorage. Le journal montre mint, puis null.
Une origine, toutes les pages
Le schéma, l’hôte et le port partagent la boîte. Ce n’est pas la boîte d’un seul fichier. Une clé posée sur la page d’accueil se voit sur la page de commande du même site. Un autre site ne peut pas la lire.
Ce que la page affiche
La page écrit la commande, la relit et montre l’invité ainsi que la boisson.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
Recharge : les mêmes mots reviennent depuis localStorage. La ligne se lit saved / lida / tea. true / Order: mint appartenait à la page des motifs.
Cinq essais courts
- Pose drink sur tea avec setItem. getItem renvoie tea.
- Demande size avec getItem. Le résultat est null.
- Garde la commande avec JSON.stringify. Après JSON.parse, le journal est lida / tea.
- Mets mint dans sessionStorage, puis removeItem. getItem renvoie null.
- Lis la page. La ligne est saved / lida / tea.
Faux pas
Le stockage retient des chaînes, pas des objets vivants. clear vise toute l’origine, pas une seule clé.
- Passer un objet et lire plus tard [object Object]
- Appeler JSON.parse sur null
- Attendre que sessionStorage survive dans un onglet neuf
- Appeler clear et effacer toutes les clés
- Lire la ligne comme true / Order: mint
À garder
- setItem et getItem stockent et lisent des chaînes
- une clé absente vaut null
- les objets entrent avec JSON.stringify et sortent avec JSON.parse
- localStorage survit à un redémarrage
- sessionStorage s’arrête avec l’onglet
- la ligne de la page est saved / lida / tea
🧠 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