Comment puis-je stocker et récupérer des tableaux JavaScript dans 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));

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"));

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);

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!