Le format JSON et le Storage

Introduction

JavaScript est un langage qui doit beaucoup échanger avec d'autres. À l'origine, il n'y a pas de développement back-end en JS et il devait donc échanger avec toute une série de langages back-end :

PHP
Python
Java
...

qui ont chacun leur logique propre, pas toujours compatible avec celle de JavaScript (PHP et Java sont des langages typés par exemple). Pour que tous ces langages puissent communiquer un a créé un format universel de représentation des données basé sur la syntaxe de JavaScript : le JSON (JavaScript Object Notation).

Ce même format nous est très utile pour stocker des données dans le navigateur : en effet, nous ne pouvons stocker que des chaines de caractères, et le format JSON transforme des données complexes (des objets) en chaines de caractères.

Données en JavaScript

let user = {
  firstName : "Mari",
  lastName : "Doucet",
  grades : [13, 14, 11]  
};

L'équivalent en JSON

"{"firstName":"Mari","lastName":"Doucet","grades":[13,14,11]}"

Le format JSON

Le format JSON est une transcription en chaine de caractère avec les caractères spéciaux encodé d'un objet JavaScript.

Dans pratiquement tous les langages, il existe des moyens de fabriquer du JSON à partir d'une donnée et des moyens de lire du JSON et d'en faire une donnée. Le fait qu'il ne prenne qu'une chaine de caractère permet d'alléger le format ce qui le rend idéal pour communiquer à travers des réseaux sans monopoliser la bande-passante.

Fabriquer du JSON : JSON.stringify

Pour transformer un objet en chaîne de caractère JSON :

let user = {
    firstName : "Mari",
    lastName : "Doucet",
    grades : [13, 11, 12]
};

JSON.stringify(user);

Lire du JSON : JSON.parse

Pour transformer du JSON en variable JavaScript :

let jsonUser = "{"firstName":"Mari","lastName":"Doucet","grades":[13,14,11]}";

let user = JSON.parse(jsonUser);

localStorage

L'un des soucis que l'on rencontre régulièrement en JavaScript c'est de ne pas pouvoir sauvegarder ses données. On peut faire tous les traitements les plus complexes, si la page est rechargée : tout est perdu.

Une solution à ce problème est proposée grâce à deux modes de stockage de données dans le navigateur : localStorage et sessionStorage.

Il s'agit d'un petit système clé : valeur qui peut stocker des chaines de caractères (d'où l'usage de JSON pour stocker).

💡 C'est quoi la différence ? localStorage reste jusqu'à ce que le cache navigateur soit vidé manuellement, sessionStorage jusqu'à ce que l'onglet en cours soit fermé.

Enregistrer une donnée : localStorage.setItem

Pour stocker une donnée dans le localStorage :

localStorage.setItem("firstName", "Mari");

Récupérer une donnée : localStorage.getItem

Pour récupérer une donnée depuis le localStorage :

let data = localStorage.getItem("firstName");

Supprimer une donnée : localStorage.removeItem

Pour supprimer une donnée dans le localStorage :

localStorage.removeItem("firstName");

sessionStorage

La syntaxe pour sessionStorage est très similaire :

Enregistrer une donnée : sessionStorage.setItem

Pour stocker une donnée dans le sessionStorage :

sessionStorage.setItem("firstName", "Mari");

Récupérer une donnée : sessionStorage.getItem

Pour récupérer une donnée depuis le sessionStorage :

let data = sessionStorage.getItem("firstName");

Supprimer une donnée : sessionStorage.removeItem

Pour supprimer une donnée dans le sessionStorage :

sessionStorage.removeItem("firstName");

14 January 2026