JavaScript Academy · Leçon

Enregistrer des objets avec JSON

Sérialisez des objets pour les enregistrer et les récupérer.

Enregistrer des objets avec JSON est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Le stockage ne contient que des chaînes

Le stockage Web enregistre des chaînes : vous ne pouvez donc pas sauvegarder directement un objet. En stocker un produit le texte inutile "[object Object]". La solution est le JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

Sérialiser avec JSON.stringify

Convertissez un objet en chaîne JSON avec JSON.stringify avant de l’enregistrer.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

Désérialiser avec JSON.parse

Lors de la lecture, reconvertissez la chaîne en objet avec JSON.parse.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

Aller-retour

Le modèle complet : sérialisez à l’enregistrement et analysez à la lecture. Cela fonctionne aussi bien pour les objets que pour les tableaux.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

Gérer le cas null

JSON.parse(null) renvoie null (il ne lève pas d’erreur), mais l’analyse de données absentes peut tout de même vous surprendre. Prévoyez une valeur par défaut de repli.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

Se prémunir contre la corruption

Si le JSON stocké est mal formé, JSON.parse lève une SyntaxError. Entourez-le de try/catch afin qu’une seule entrée incorrecte ne fasse pas planter votre application.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

Un assistant d’enregistrement réutilisable

Encapsulez l’étape de sérialisation dans un assistant afin de ne jamais l’oublier.

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

Ce que JSON ne conserve pas

JSON ne peut pas représenter les fonctions, undefined, les objets Date (ils deviennent des chaînes), Map ou Set. Prévoyez cela : stockez les dates sous forme de chaînes ISO et recréez-les lors de la lecture.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

Restaurer les dates

Comme les dates sont sérialisées en chaînes, reconvertissez-les après l’analyse si vous avez besoin des méthodes de Date.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

Mettre à jour des données imbriquées

Pour modifier une partie d’un objet stocké, lisez-le, modifiez la copie, puis réenregistrez-la. Le stockage ne possède aucune API de mise à jour partielle.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

Versionner les structures stockées

Les structures des données de l’application évoluent avec le temps. Le stockage d’un champ version vous permet de migrer ou de supprimer les anciennes données lorsque le format évolue.

saveJSON("prefs", { version: 2, theme: "dark" });

Vérification rapide

Stocker des objets dans le stockage Web.

Récapitulatif

Le stockage contient des chaînes : utilisez donc JSON.stringify pour les objets avant l’enregistrement et JSON.parse lors de la lecture. Protégez l’analyse avec try/catch et prévoyez des valeurs par défaut. N’oubliez pas que JSON ignore les fonctions et undefined, et transforme les dates en chaînes. Mettez à jour les données imbriquées en les lisant, en les modifiant, puis en les réenregistrant, et envisagez de versionner vos structures stockées.

Questions Fréquemment Posées

La leçon « Enregistrer des objets avec JSON » est-elle gratuite ?

Oui — le texte complet de « Enregistrer des objets avec JSON » 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 des objets avec JSON » ?

Sérialisez des objets pour les enregistrer et les récupérer. 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 3 sur 4.

Combien de temps prend la leçon « Enregistrer des objets avec JSON » ?

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

← Retour à JavaScript Academy