Wie kann ich JavaScript-Arrays in localStorage speichern und abrufen?

localStorage: Array-Speicher-Dilemma

Bei der Verwendung von localStorage zum Speichern von Variablen ist es wichtig, dessen Einschränkungen zu beachten. Im Gegensatz zu normalem JavaScript kann localStorage nur Zeichenfolgen verarbeiten. Dies stellt eine Herausforderung dar, wenn Sie versuchen, komplexe Datenstrukturen wie Arrays zu speichern.

In Ihrem Originalcode versuchen Sie, ein Array direkt localStorage zuzuweisen. Dieser Ansatz schlägt jedoch fehl, da localStorage einen Zeichenfolgenwert erwartet. Um dieses Problem zu lösen, müssen wir das Array in einen String konvertieren.

JSON to the Rescue

JSON (JavaScript Object Notation) ist ein Datenaustauschformat, das dies ermöglicht uns, Objekte und Arrays als Strings darzustellen. Durch die Verwendung von JSON.stringify() können wir das Namensarray in einen JSON-String konvertieren.

var names = [];
names[0] = prompt("New member name?");
localStorage.setItem("names", JSON.stringify(names));

Dieser Code speichert das Namensarray erfolgreich als String in localStorage.

Abruf und Verwendung

Beim Abrufen des Arrays aus localStorage müssen wir den gespeicherten JSON-String wieder in konvertieren ein Array mit JSON.parse().

var storedNames = JSON.parse(localStorage.getItem("names"));

StoredNames enthält jetzt das ursprüngliche Array, das in localStorage gespeichert wurde.

Alternativ können Sie auch den direkten Eigenschaftszugriff verwenden, um und festzulegen Rufen Sie die JSON-Zeichenfolge ab und umgehen Sie die Methoden setItem() und getItem():

localStorage.names = JSON.stringify(names);
var storedNames = JSON.parse(localStorage.names);

Diese Methode bietet eine prägnantere Syntax. Es ist jedoch wichtig zu beachten, dass es in älteren Browsern möglicherweise nicht unterstützt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich JavaScript-Arrays in localStorage speichern und abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!