JSON, localStorage et premier fetch

Sérialisez vos données en JSON, persistez-les dans le navigateur avec localStorage et récupérez des données distantes avec fetch.

10 min · 3 questions

JSON est le format d'échange universel du web : c'est du texte dont la syntaxe ressemble aux objets JavaScript (clés entre guillemets doubles, pas de fonctions). Deux méthodes suffisent : JSON.stringify transforme une valeur JavaScript en chaîne, JSON.parse fait le chemin inverse.

const task = { title: "Relire le cours", done: false };

const json = JSON.stringify(task);
console.log(json);
// {"title":"Relire le cours","done":false}

const parsed = JSON.parse(json);
console.log(parsed.done); // false

localStorage conserve des données dans le navigateur, même après fermeture de l'onglet. C'est parfait pour un thème choisi, un brouillon ou une liste de tâches. Comme il ne stocke que du texte, JSON sert de pont : on sérialise avant setItem, on désérialise après getItem.

const tasks = [
  { title: "Acheter du pain", done: false },
  { title: "Relire le cours", done: true }
];

localStorage.setItem("tasks", JSON.stringify(tasks));

const raw = localStorage.getItem("tasks");
const saved = raw ? JSON.parse(raw) : [];
console.log(saved.length); // 2

Dernière brique : aller chercher des données sur un serveur. fetch envoie une requête HTTP et retourne une promesse. Avec async/await, le code se lit de haut en bas : on attend la réponse, on vérifie qu'elle est valide, puis on attend le décodage JSON, lui aussi asynchrone.

async function loadUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const users = await response.json();
  console.log(users[0].name);
}

loadUsers();

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Que fait JSON.stringify ?
   • Elle convertit une chaîne JSON en objet JavaScript
   • Elle convertit une valeur JavaScript en chaîne JSON
   • Elle valide la syntaxe d'un fichier JSON
2. Que retourne localStorage.getItem pour une clé qui n'existe pas ?
   • Une chaîne vide
   • undefined
   • null
   • Une erreur est levée
3. Pourquoi écrire await response.json() et non simplement response.json() ?
   • Parce que response.json() retourne une promesse
   • Pour convertir la réponse en chaîne de caractères
   • Pour relancer la requête si elle a échoué