Wie man Objekte in localStorage und sessionStorage speichert: Eine vollständige Anleitung

Warum localStorage nicht mit Objekten funktioniert (und wie man das behebt)

Haben Sie jemals versucht, ein Objekt in localStorage zu speichern und stattdessen den String "[object Object]" erhalten? Wenn ja, sind Sie nicht allein. Diese Frage auf Stack Overflow hat tausende Aufrufe gesammelt, und heute klären wir ein für alle Mal, wie man Objekte korrekt im HTML5-Web-Speicher speichert.

Die Sache ist die: localStorage und sessionStorage können nur mit Strings arbeiten. Wenn Sie schreiben:

localStorage.setItem('user', {name: 'Anna', age: 25});

ruft JavaScript automatisch die Methode .toString() des Objekts auf, und das Ergebnis ist ein nutzloser String. Es gibt jedoch einen bewährten Weg, diese Einschränkung zu umgehen – die Serialisierung mit JSON.

Was ist Serialisierung und warum wird sie benötigt

Serialisierung ist der Prozess der Umwandlung einer komplexen Datenstruktur (Objekt, Array) in einen String, der gespeichert oder übertragen werden kann. Der umgekehrte Prozess heißt Deserialisierung (Umwandlung eines Strings zurück in ein Objekt).

In JavaScript sind dafür zwei Methoden zuständig:

• JSON.stringify() – wandelt ein Objekt in einen JSON-String um
• JSON.parse() – wandelt einen JSON-String zurück in ein Objekt

Genau diese Methoden sind der Schlüssel zur Lösung des Problems der Objektspeicherung in localStorage und sessionStorage.

Schritt-für-Schritt-Tutorial: Ein Objekt in localStorage speichern

Schritt 1. Ein Objekt erstellen

const user = {  id: 101,  name: 'Maria',  email: 'maria@example.com',  preferences: {    theme: 'dark',    notifications: true  },  tags: ['javascript', 'react', 'python']};

Schritt 2. In JSON serialisieren

const userJSON = JSON.stringify(user);console.log(userJSON); // {"id":101,"name":"Maria","email":"maria@example.com","preferences":{"theme":"dark","notifications":true},"tags":["javascript","react","python"]}

Schritt 3. In localStorage speichern

localStorage.setItem('currentUser', userJSON);

Schritt 4. Abrufen und deserialisieren

const savedUserJSON = localStorage.getItem('currentUser');const savedUser = JSON.parse(savedUserJSON);

console.log(savedUser.name); // Mariaconsole.log(savedUser.preferences.theme); // darkconsole.log(savedUser.tags[0]); // javascript

Das war's! Jetzt haben Sie ein vollwertiges Objekt mit allen verschachtelten Strukturen.

sessionStorage: Das Gleiche, aber mit einer Besonderheit

sessionStorage funktioniert genauso wie localStorage, jedoch mit einem wichtigen Unterschied: Die Daten leben nur bis zum Schließen des Tabs. Sobald Sie den Browser-Tab schließen, wird alles gelöscht.

// SpeichernsessionStorage.setItem('tempData', JSON.stringify({step: 3, progress: '75%'}));

// Abrufenconst temp = JSON.parse(sessionStorage.getItem('tempData'));console.log(temp.progress); // 75%

Verwenden Sie sessionStorage für temporäre Daten: Formularzustand, Schritte eines Konfigurationsassistenten, einmalige Token.

Typische Fehler und wie man sie vermeidet

Fehler 1: Vergessen zu parsen

const data = localStorage.getItem('myObject');console.log(data.name); // undefined – weil data ein String ist!

Lösung: Verwenden Sie nach dem Abrufen der Daten immer JSON.parse().

Fehler 2: undefined oder Funktionen speichern

const obj = { name: 'Alex', greet: function() { return 'Hi!'; } };localStorage.setItem('test', JSON.stringify(obj)); // Funktion geht verloren

Lösung: JSON.stringify speichert keine Funktionen, undefined, Symbol.