0Pricing
JavaScript Academy · Leçon

Enregistrer et lire des données

Utilisez setItem, getItem et removeItem.

Enregistrer et lire des données est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Stockage clé-valeur du navigateur

Le stockage Web fournit à chaque origine un magasin clé-valeur simple dans le navigateur. Les deux API, localStorage et sessionStorage, partagent les mêmes méthodes et ne stockent que des chaînes.

Écrire avec setItem

Enregistrez une valeur avec setItem(key, value). Les deux arguments sont des chaînes.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Lire avec getItem

Récupérez une valeur avec getItem(key). Si la clé n’existe pas, la méthode renvoie null, et non undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Accéder aux propriétés

Vous pouvez aussi lire et écrire comme avec des propriétés d’objet, mais la forme utilisant les méthodes est plus claire et évite les conflits avec les noms intégrés. Préférez les méthodes.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Supprimer un élément

Supprimez une seule entrée avec removeItem(key). Supprimer une clé inexistante ne produit aucun effet et ne pose aucun problème.

localStorage.removeItem("username");

Tout effacer

clear() supprime toutes les clés de l’origine actuelle. Utilisez-le avec prudence : il n’y a pas d’annulation.

localStorage.clear();

Tout est une chaîne

Le stockage ne contient que des chaînes. Les nombres et les valeurs booléennes sont convertis en texte. Relisez-les sous forme de chaînes et convertissez-les si nécessaire.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Compter les clés

La propriété length indique le nombre de clés stockées et key(index) renvoie le nom situé à une position donnée. C’est utile pour parcourir les éléments.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Parcourir le stockage

Parcourez toutes les clés stockées à l’aide de la longueur et de key(). Lisez chaque valeur au fur et à mesure.

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

Vérifier l’existence

Comme une clé absente renvoie null, vous pouvez vérifier sa présence avec une simple comparaison.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Même origine uniquement

Le stockage est limité à l’origine (schéma + hôte + port). Un site ne peut pas lire le stockage d’un autre site, et http et https sont considérés comme des origines différentes.

Vérification rapide

Lire et écrire dans le stockage Web.

Récapitulatif

Le stockage Web est un magasin clé-valeur de chaînes propre à chaque origine. Utilisez setItem, getItem (qui renvoie null en l’absence de valeur), removeItem et clear. Parcourez les éléments avec length et key(i). Tout est une chaîne : convertissez donc vous-même les types, et le stockage est isolé pour chaque origine.

Questions Fréquemment Posées

La leçon « Enregistrer et lire des données » est-elle gratuite ?

Oui — le texte complet de « Enregistrer et lire des données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Enregistrer et lire des données » ?

Utilisez setItem, getItem et removeItem. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Enregistrer et lire des données » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Enregistrer et lire des données
  2. localStorage ou sessionStorage
  3. Enregistrer des objets avec JSON
  4. Événements et limites du stockage
← Retour à JavaScript Academy