Maison > interface Web > js tutoriel > Comment puis-je stocker et récupérer des tableaux JavaScript dans localStorage ?

Comment puis-je stocker et récupérer des tableaux JavaScript dans localStorage ?

Barbara Streisand
Libérer: 2024-12-09 17:13:15
original
337 Les gens l'ont consulté

How Can I Store and Retrieve JavaScript Arrays in localStorage?

localStorage : dilemme de stockage de tableau

Lors de l'utilisation de localStorage pour stocker des variables, il est crucial de noter ses limites. Contrairement au JavaScript classique, localStorage ne peut gérer que les chaînes. Cela présente un défi lorsque vous essayez de stocker des structures de données complexes telles que des tableaux.

Dans votre code d'origine, vous essayez d'attribuer directement un tableau à localStorage. Cependant, cette approche échouera car localStorage attend une valeur de chaîne. Pour résoudre ce problème, nous devons convertir le tableau en chaîne.

JSON à la rescousse

JSON (JavaScript Object Notation) est un format d'échange de données qui permet nous pour représenter les objets et les tableaux sous forme de chaînes. En utilisant JSON.stringify(), nous pouvons convertir le tableau de noms en chaîne JSON.

var names = [];
names[0] = prompt("New member name?");
localStorage.setItem("names", JSON.stringify(names));
Copier après la connexion

Ce code stockera avec succès le tableau de noms sous forme de chaîne dans localStorage.

Récupération et utilisation

Lors de la récupération du tableau de localStorage, nous devons reconvertir la chaîne JSON stockée en un tableau en utilisant JSON.parse().

var storedNames = JSON.parse(localStorage.getItem("names"));
Copier après la connexion

Maintenant, stockeredNames contiendra le tableau d'origine qui a été stocké dans localStorage.

Vous pouvez également utiliser l'accès direct à la propriété pour définir et récupérer le JSON. string, en contournant les méthodes setItem() et getItem() :

localStorage.names = JSON.stringify(names);
var storedNames = JSON.parse(localStorage.names);
Copier après la connexion

Cette méthode fournit une syntaxe plus concise, mais elle est importante à noter qu'il peut ne pas être pris en charge dans les anciens navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal