localStorage richtig benutzen – JSON, Ausfallsicherheit und der volle Speicher

localStorage ist der bequemste Speicher im Browser: kein Server, keine Einrichtung, überlebt das Schließen des Tabs. Und es gibt drei Eigenheiten, über die praktisch jeder einmal stolpert.

1. Es speichert nur Text

localStorage.setItem('einstellungen', { thema: 'dunkel' });
localStorage.getItem('einstellungen');   // "[object Object]"

Das Objekt wird stumpf in einen String umgewandelt — und ist danach weg. Richtig ist immer der Umweg über JSON:

localStorage.setItem('einstellungen', JSON.stringify({ thema: 'dunkel' }));
const e = JSON.parse(localStorage.getItem('einstellungen'));

2. Beim Lesen kann alles Mögliche zurückkommen

Der Schlüssel existiert nicht? Dann ist es null, und JSON.parse(null) ergibt ebenfalls null — noch kein Drama. Aber wenn dort altes Zeug aus einer früheren Version deiner Seite liegt, wirft JSON.parse eine Exception und dein Skript stirbt an Zeile eins.

3. Es kann schlicht verboten sein

Im privaten Modus mancher Browser, bei strengen Cookie-Einstellungen oder in einem iframe von einer anderen Domain wirft schon der bloße Zugriff einen Fehler. Nicht null, sondern eine echte Exception.

Zwei kleine Helfer, die alles abfangen

function lade(schluessel, standard = null) {
    try {
        const roh = localStorage.getItem(schluessel);
        return roh === null ? standard : JSON.parse(roh);
    } catch (e) {
        return standard;     // kaputt oder gesperrt → Standardwert
    }
}

function speichere(schluessel, wert) {
    try {
        localStorage.setItem(schluessel, JSON.stringify(wert));
        return true;
    } catch (e) {
        // QuotaExceededError oder Zugriff verboten
        return false;
    }
}

Ab hier ist der eigentliche Code angenehm:

const einst = lade('einstellungen', { thema: 'hell', schrift: 16 });
einst.thema = 'dunkel';
speichere('einstellungen', einst);

Das Entscheidende ist der Standardwert. Deine Seite funktioniert damit auch dann, wenn gar nichts gespeichert werden kann — sie merkt sich die Einstellung nur nicht bis zum nächsten Besuch. Das ist ein akzeptabler Nachteil; eine weiße Seite wäre keiner.

Der Speicher ist begrenzt

Ungefähr 5 MB pro Herkunft, je nach Browser. Das klingt nach viel, ist aber schnell weg, wenn man Bilder als Base64 hineinlegt (bitte nicht) oder ganze API-Antworten zwischenspeichert. Ist er voll, wirft setItem einen QuotaExceededError — abgefangen ist er oben schon.

Faustregel: In localStorage gehören Einstellungen, kein Datenbestand. Theme, Sprache, zuletzt geöffneter Reiter, ein Entwurfstext. Alles, was größer wird oder mehreren Nutzern gehört, gehört auf den Server.

Und was ist mit Datenschutz?

localStorage ist kein Cookie, unterliegt in der Bewertung aber denselben Fragen: Speicherst du dort etwas, das nicht technisch notwendig für die vom Nutzer gewünschte Funktion ist, brauchst du eine Einwilligung. Ein gespeichertes Farbschema, das der Nutzer selbst umgestellt hat, ist unkritisch. Eine Besucher-ID zur Wiedererkennung ist es nicht. Das hier ist meine praktische Einordnung und ersetzt keine Rechtsberatung — im Zweifel lässt man das jemanden prüfen, der das darf.

Genau deshalb kommen meine kleinen Rechner auf tools.bymw.de ganz ohne Tracking aus: Was im Browser bleibt, muss man auch nicht erklären.

Quellen

• MDN: Window.localStorage
• MDN: Web Storage API – Speicherlimits und Fehler
• MDN: JSON.parse