Wie speichert man Objekte im HTML5 Local Storage?

Leon A. -

Problem: Objekte im HTML5 Local Storage speichern

Der Local Storage in HTML5 ermöglicht es Webseiten, Daten im Browser des Benutzers zu speichern. Er unterstützt jedoch nur die Speicherung von Zeichenketten, was es schwierig macht, komplexe Datenstrukturen wie Objekte zu speichern. Dieses Problem erfordert eine Lösung für das Speichern und Abrufen von Objekten im Local Storage.

Lösung: Verwendung von JSON zum Speichern von Objekten im Local Storage

Umwandlung von Objekten in Zeichenketten

Um Objekte im Local Storage zu speichern, können Sie JSON.stringify() verwenden. Diese Methode wandelt JavaScript-Objekte in JSON-Zeichenketten um. Nach der Umwandlung können Sie die Zeichenkette im Local Storage speichern.

Zum Beispiel:

const myObject = { name: "John", age: 30 };
const jsonString = JSON.stringify(myObject);
localStorage.setItem("user", jsonString);

Tipp: Umgang mit zirkulären Referenzen

Bei der Verwendung von JSON.stringify() sollten Sie auf zirkuläre Referenzen in Ihren Objekten achten. Diese können zu Fehlern führen. Um dies zu vermeiden, können Sie eine benutzerdefinierte Ersetzungsfunktion verwenden:

const replacer = (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (cache.includes(value)) return '[Circular]';
    cache.push(value);
  }
  return value;
};

const cache = [];
const jsonString = JSON.stringify(myObject, replacer);
localStorage.setItem("user", jsonString);

Abrufen und Parsen gespeicherter Objekte

Um das gespeicherte Objekt abzurufen, verwenden Sie JSON.parse(). Diese Methode wandelt die gespeicherte JSON-Zeichenkette zurück in ein JavaScript-Objekt um. Dieser Vorgang stellt die Objektstruktur und -eigenschaften wieder her.

So können Sie das Objekt abrufen:

const storedJsonString = localStorage.getItem("user");
const retrievedObject = JSON.parse(storedJsonString);
console.log(retrievedObject.name); // Ausgabe: John
console.log(retrievedObject.age);  // Ausgabe: 30

Schritt-für-Schritt-Anleitung zur Objektspeicherung im Local Storage

Vorbereitung des Objekts für die Speicherung

Um ein Objekt im Local Storage zu speichern, erstellen Sie zunächst Ihr JavaScript-Objekt. Verwenden Sie dann JSON.stringify(), um es in eine Zeichenkette umzuwandeln. Hier ein Beispiel:

const userObject = {
  name: "Alice",
  age: 28,
  hobbies: ["reading", "swimming"]
};

const userString = JSON.stringify(userObject);

Tipp: Umgang mit komplexen Objekten

Bei komplexen Objekten, die Funktionen oder zirkuläre Referenzen enthalten, sollten Sie eine benutzerdefinierte Replacer-Funktion mit JSON.stringify() verwenden, um diese Fälle angemessen zu behandeln.

Speichern des Objekts im Local Storage

Nach der Vorbereitung des Objekts verwenden Sie localStorage.setItem(), um es zu speichern. Diese Methode benötigt zwei Argumente: einen Schlüssel (eine Zeichenkette zur Identifizierung der Daten) und das in eine Zeichenkette umgewandelte Objekt. Zum Beispiel:

localStorage.setItem("user", userString);

Abrufen des Objekts aus dem Local Storage

Um das gespeicherte Objekt abzurufen, verwenden Sie localStorage.getItem() mit dem Schlüssel, den Sie zum Speichern der Daten verwendet haben. Dies gibt die gespeicherte Zeichenkette zurück. Verwenden Sie dann JSON.parse(), um die Zeichenkette wieder in ein Objekt umzuwandeln. So geht's:

const storedUserString = localStorage.getItem("user");
const retrievedUserObject = JSON.parse(storedUserString);

console.log(retrievedUserObject.name);  // Ausgabe: Alice
console.log(retrievedUserObject.hobbies[0]);  // Ausgabe: reading