Comment stocker des objets dans le stockage local HTML5 ?

Lucas D. -

Problème : Stocker des objets dans le stockage local HTML5

Le stockage local en HTML5 permet aux sites web de sauvegarder des données dans le navigateur de l'utilisateur. Il ne prend en charge que le stockage de chaînes de caractères, ce qui rend difficile la sauvegarde de structures de données complexes comme les objets. Ce problème nécessite une solution pour stocker et récupérer des objets dans le stockage local.

Solution : Utilisation de JSON pour stocker des objets dans le stockage local

Conversion d'objets en chaînes de caractères

Pour stocker des objets dans le stockage local, vous pouvez utiliser JSON.stringify(). Cette méthode transforme les objets JavaScript en chaînes JSON. Après la conversion, vous pouvez stocker la chaîne dans le stockage local.

Par exemple :

const myObject = { name: "John", age: 30 };
const jsonString = JSON.stringify(myObject);
localStorage.setItem("user", jsonString);

Exemple: Gérer les références circulaires

Lors de l'utilisation de JSON.stringify(), faites attention aux références circulaires dans vos objets. Celles-ci peuvent provoquer des erreurs. Pour éviter cela, vous pouvez utiliser une fonction de remplacement personnalisée :

const replacer = (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (cache.includes(value)) return '[Circular]';
    cache.push(value);
  }
  return value;
};

const cache = [];
const jsonString = JSON.stringify(myObject, replacer);
localStorage.setItem("user", jsonString);

Récupération et analyse des objets stockés

Pour obtenir l'objet stocké, utilisez JSON.parse(). Cette méthode transforme la chaîne JSON stockée en un objet JavaScript. Ce processus restaure la structure et les propriétés de l'objet.

Voici comment vous pouvez obtenir l'objet :

const storedJsonString = localStorage.getItem("user");
const retrievedObject = JSON.parse(storedJsonString);
console.log(retrievedObject.name); // Sortie : John
console.log(retrievedObject.age);  // Sortie : 30

Guide étape par étape pour le stockage d'objets dans le stockage local

Préparation de l'objet pour le stockage

Pour stocker un objet dans le stockage local, créez votre objet JavaScript. Ensuite, utilisez JSON.stringify() pour le convertir en chaîne de caractères. Voici un exemple :

const userObject = {
  name: "Alice",
  age: 28,
  hobbies: ["reading", "swimming"]
};

const userString = JSON.stringify(userObject);

Exemple: Gestion des objets complexes

Lorsque vous traitez des objets complexes contenant des fonctions ou des références circulaires, envisagez d'utiliser une fonction de remplacement personnalisée avec JSON.stringify() pour gérer ces cas de manière appropriée.

Stockage de l'objet dans le stockage local

Après avoir préparé l'objet, utilisez localStorage.setItem() pour le stocker. Cette méthode prend deux arguments : une clé (une chaîne pour identifier les données) et l'objet stringifié. Par exemple :

localStorage.setItem("user", userString);

Récupération de l'objet depuis le stockage local

Pour récupérer l'objet stocké, utilisez localStorage.getItem() avec la clé que vous avez utilisée pour stocker les données. Cela renvoie la chaîne stockée. Ensuite, utilisez JSON.parse() pour reconvertir la chaîne en objet. Voici comment faire :

const storedUserString = localStorage.getItem("user");
const retrievedUserObject = JSON.parse(storedUserString);

console.log(retrievedUserObject.name);  // Sortie : Alice
console.log(retrievedUserObject.hobbies[0]);  // Sortie : reading