Maison >interface Web >js tutoriel >Comment stocker et récupérer correctement les tableaux JavaScript dans LocalStorage ?

Comment stocker et récupérer correctement les tableaux JavaScript dans LocalStorage ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-23 11:00:41944parcourir

How to Properly Store and Retrieve JavaScript Arrays in LocalStorage?

Comment stocker un tableau dans LocalStorage

Lorsque vous travaillez avec des tableaux en JavaScript, il existe des scénarios dans lesquels un stockage persistant est nécessaire pour conserver les données au-delà de la durée de vie d'une seule page charger. LocalStorage fournit une solution pratique à cet effet, mais ses caractéristiques uniques nécessitent une approche spécifique du stockage des tableaux.

Dans l'extrait de code donné, une tentative est faite pour stocker un tableau directement dans localStorage en utilisant la syntaxe localStorage[names ]. Toutefois, cette approche est incorrecte car localStorage ne prend en charge que les chaînes. Pour surmonter cette limitation, la solution réside dans la conversion du tableau en chaîne à l'aide de JSON.stringify() avant de l'enregistrer dans localStorage.

Voici le code corrigé :

// Convert the array to a string using JSON.stringify()
var namesString = JSON.stringify(names);

// Store the string in localStorage
localStorage.setItem("names", namesString);

//...

// Retrieve the stored string from localStorage
var storedNamesString = localStorage.getItem("names");

// Convert the string back to an array using JSON.parse()
var storedNames = JSON.parse(storedNamesString);

Alternativement, un une approche plus concise consiste à utiliser l'accès direct pour définir et obtenir des éléments dans localStorage, comme indiqué ci-dessous :

// Convert the array to a string using JSON.stringify()
localStorage.names = JSON.stringify(names);

// Retrieve the stored string from localStorage
var storedNames = JSON.parse(localStorage.names);

En utilisant JSON.stringify() et JSON.parse(), vous pouvez stocker et récupérer efficacement des tableaux dans localStorage, garantissant un stockage persistant de vos données.

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!

Déclaration:
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