Comment stocker des objets dans localStorage et sessionStorage : guide complet

Pourquoi localStorage ne fonctionne pas avec les objets (et comment y remédier)

Avez-vous déjà essayé de sauvegarder un objet dans localStorage et obtenu à la place une chaîne "[object Object]" ? Si oui, vous n'êtes pas seul. Cette question sur Stack Overflow a recueilli des milliers de vues, et aujourd'hui nous allons une fois pour toutes comprendre comment stocker correctement des objets dans le stockage web HTML5.

Le problème est que localStorage et sessionStorage ne peuvent fonctionner qu'avec des chaînes de caractères. Lorsque vous écrivez :

localStorage.setItem('user', {name: 'Анна', age: 25});

JavaScript appelle automatiquement la méthode .toString() sur l'objet, et le résultat est une chaîne inutile. Mais il existe une méthode éprouvée pour contourner cette limitation : la sérialisation via JSON.

Qu'est-ce que la sérialisation et pourquoi en a-t-on besoin

La sérialisation est le processus de conversion d'une structure de données complexe (objet, tableau) en une chaîne qui peut être sauvegardée ou transmise. Le processus inverse s'appelle la désérialisation (transformation d'une chaîne en objet).

En JavaScript, deux méthodes sont responsables de cela :

• JSON.stringify() — transforme un objet en chaîne JSON
• JSON.parse() — transforme une chaîne JSON en objet

Ces méthodes sont la clé pour résoudre le problème du stockage d'objets dans localStorage et sessionStorage.

Tutoriel pas à pas : sauvegarder un objet dans localStorage

Étape 1. Créer un objet

const user = {  id: 101,  name: 'Мария',  email: 'maria@example.com',  preferences: {    theme: 'dark',    notifications: true  },  tags: ['javascript', 'react', 'python']};

Étape 2. Sérialiser en JSON

const userJSON = JSON.stringify(user);console.log(userJSON); // {"id":101,"name":"Мария","email":"maria@example.com","preferences":{"theme":"dark","notifications":true},"tags":["javascript","react","python"]}

Étape 3. Sauvegarder dans localStorage

localStorage.setItem('currentUser', userJSON);

Étape 4. Récupérer et désérialiser

const savedUserJSON = localStorage.getItem('currentUser');const savedUser = JSON.parse(savedUserJSON);

console.log(savedUser.name); // Марияconsole.log(savedUser.preferences.theme); // darkconsole.log(savedUser.tags[0]); // javascript

Et voilà ! Vous avez maintenant un objet complet avec toutes ses structures imbriquées.

sessionStorage : la même chose, mais avec une nuance

sessionStorage fonctionne exactement comme localStorage, mais avec une différence importante : les données ne vivent que jusqu'à la fermeture de l'onglet. Dès que vous fermez l'onglet du navigateur, tout est supprimé.

// SauvegardersessionStorage.setItem('tempData', JSON.stringify({step: 3, progress: '75%'}));

// Récupérerconst temp = JSON.parse(sessionStorage.getItem('tempData'));console.log(temp.progress); // 75%

Utilisez sessionStorage pour les données temporaires : état de formulaire, étapes d'assistant de configuration, jetons à usage unique.

Erreurs typiques et comment les éviter

Erreur 1 : Oublier de parser

const data = localStorage.getItem('myObject');console.log(data.name); // undefined — car data est une chaîne !

Solution : utilisez toujours JSON.parse() après avoir récupéré les données.

Erreur 2 : Sauvegarder undefined ou des fonctions

const obj = { name: 'Alex', greet: function() { return 'Hi!'; } };localStorage.setItem('test', JSON.stringify(obj)); // la fonction sera perdue

Solution : JSON.stringify ne sauvegarde pas les fonctions, undefined, Symbol