Stockage d'objets JavaScript dans HTML5 localStorage et sessionStorage

Travailler avec des objets dans le stockage Web

Lorsqu'ils travaillent avec HTML5 localStorage ou sessionStorage, les développeurs rencontrent souvent des problèmes lorsqu'ils tentent de stocker des objets JavaScript. Contrairement aux types de données et aux tableaux primitifs, les objets semblent être convertis en chaînes, ce qui peut prêter à confusion et entraîner des résultats inattendus.

Comprendre comment stocker et récupérer correctement des objets à l'aide de Web Storage est crucial pour de nombreuses applications Web. Ce guide explorera pourquoi les objets sont convertis en chaînes et fournira une solution de contournement simple pour garantir que vos objets sont stockés et récupérés correctement.

Commande	Description
JSON.stringify()	Convertit un objet ou une valeur JavaScript en chaîne JSON, permettant le stockage dans localStorage ou sessionStorage.
localStorage.setItem()	Stocke une paire clé-valeur dans l'objet localStorage, permettant aux données de persister au fil des sessions du navigateur.
localStorage.getItem()	Récupère la valeur associée à une clé donnée depuis localStorage.
JSON.parse()	Analyse une chaîne JSON et la reconvertit en un objet JavaScript, permettant la récupération de structures de données complexes.
sessionStorage.setItem()	Stocke une paire clé-valeur dans l'objet sessionStorage, permettant aux données de persister pendant toute la durée de la session de la page.
sessionStorage.getItem()	Récupère la valeur associée à une clé donnée depuis sessionStorage.

Stockage et récupération efficaces d'objets dans le stockage Web

En JavaScript, et sont des objets de stockage Web qui vous permettent d'enregistrer des paires clé-valeur dans le navigateur. Cependant, ces solutions de stockage ne prennent en charge que les chaînes, ce qui signifie que tenter de stocker directement un objet JavaScript entraînera la conversion de l'objet en une représentation sous forme de chaîne comme . Pour stocker efficacement les objets, vous devez les convertir en chaîne JSON à l'aide de JSON.stringify(). Cette méthode prend un objet JavaScript et renvoie une chaîne JSON, qui peut être stockée dans ou .

Pour récupérer l'objet stocké, vous devez reconvertir la chaîne JSON en un objet JavaScript à l'aide de . Cette méthode prend une chaîne JSON et renvoie l'objet JavaScript correspondant. Les scripts fournis dans les exemples ci-dessus illustrent ce processus. Tout d'abord, un objet est créé et converti en chaîne JSON avec avant d'être stocké dans en utilisant localStorage.setItem(). Pour récupérer l'objet, la chaîne JSON est récupérée depuis en utilisant puis analysé dans un objet JavaScript à l'aide de .

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Techniques avancées pour le stockage Web

Lors de l'utilisation de HTML5 et , les développeurs ont souvent besoin de stocker des données plus complexes que de simples chaînes. Bien que la sérialisation et la désérialisation JSON soient efficaces pour les objets de base, des scénarios plus avancés peuvent nécessiter des considérations supplémentaires. Par exemple, si vous travaillez avec des objets profondément imbriqués ou des objets contenant des méthodes, vous avez besoin d'une approche plus sophistiquée. Une technique courante consiste à utiliser une bibliothèque telle que ou circular-json pour gérer les références circulaires et les structures d'objets plus complexes.

Ces bibliothèques étendent la norme et des méthodes pour prendre en charge la sérialisation et la désérialisation d'objets avec des références circulaires, permettant une solution plus robuste pour stocker des objets dans le stockage Web. Une autre considération est la compression des données. Pour les objets volumineux, vous pouvez utiliser des bibliothèques comme compresser les données avant de les stocker dans localStorage ou , réduisant ainsi la quantité d'espace utilisé. Cela peut être particulièrement utile pour les applications qui doivent stocker une quantité importante de données côté client.

1. Puis-je stocker des fonctions dans ou ?
2. Non, les fonctions ne peuvent pas être stockées directement dans le stockage Web. Vous pouvez stocker le code de fonction sous forme de chaîne et utiliser pour le recréer, mais cela n'est généralement pas recommandé en raison des risques de sécurité.
3. Comment gérer les références circulaires dans les objets ?
4. Utilisez des bibliothèques comme ou qui sont conçus pour gérer les références circulaires dans les objets JavaScript.
5. Quelle est la limite de stockage pour ?
6. La limite de stockage pour est généralement d'environ 5 Mo, mais cela peut varier selon les navigateurs.
7. Puis-je compresser les données avant de les stocker ?
8. Oui, vous pouvez utiliser des bibliothèques comme compresser vos données avant de les stocker dans ou .
9. Comment stocker un tableau d’objets ?
10. Convertissez le tableau en chaîne JSON en utilisant avant de le ranger ou .
11. Est-il sécurisé de stocker des données sensibles dans ?
12. Non, il n'est pas sécurisé de stocker des données sensibles dans car il est accessible via JavaScript et peut être compromis si le site est attaqué.
13. Puis-je utiliser dans différents domaines ?
14. Non, est limité à la même origine, ce qui signifie qu’il n’est pas accessible sur différents domaines.
15. Que se passe-t-il si l'utilisateur efface les données de son navigateur ?
16. Toutes les données stockées dans et sera supprimé si l'utilisateur efface les données de son navigateur.

Stocker et récupérer efficacement des objets dans le stockage Web HTML5 nécessite de convertir les objets en chaînes JSON avec puis en les analysant avec . Cette méthode garantit que les données restent intactes et utilisables dans différentes sessions de navigateur. En comprenant et en utilisant ces techniques, les développeurs peuvent exploiter localStorage et sessionStorage pour des tâches de gestion de données plus complexes, améliorant ainsi les fonctionnalités et les performances de leurs applications Web.