Storage.getItem() — Methode · JavaScript-Referenz

Signatur

Storage.prototype.getItem(keyName)

Beschreibung

getItem() ist die Lesemethode des Storage-Interfaces der Web Storage API. Sie wird auf window.localStorage (bleibt auch nach dem Schließen des Browsers erhalten) oder window.sessionStorage (gilt nur für den aktuellen Tab bzw. die aktuelle Sitzung) aufgerufen und gibt den Wert zurück, der zuvor mit setItem() gespeichert wurde.

Web Storage speichert ausschließlich Strings. Zahlen, Booleans oder Objekte werden beim Speichern in Strings umgewandelt. Deshalb muss man beim Lesen selbst zurückwandeln, bei Objekten meist mit JSON.parse(), bei Zahlen mit Number(). Existiert der Schlüssel nicht, gibt die Methode null zurück und nicht undefined. Das eignet sich gut für Standardwerte mit dem Nullish-Coalescing-Operator ??.

Typische Einsatzfälle sind Benutzereinstellungen wie Theme oder Sprache, zwischengespeicherte Formulareingaben, Feature-Flags oder kleine Caches. Der Zugriff ist synchron und blockiert den Hauptthread. Für große Datenmengen ist daher IndexedDB besser geeignet.

Parameter

Name	Typ	Default	Beschreibung
$keyName Pflicht	string		Name des Schlüssels, dessen Wert gelesen werden soll. Andere Typen werden in einen String umgewandelt (z. B. `1` → `"1"`). Groß- und Kleinschreibung wird unterschieden.

Rückgabewert

Typ

string | null

Beschreibung

Den gespeicherten Wert als String oder null, wenn der Schlüssel im Storage-Objekt nicht existiert.

Beispiele

Einfachen Wert lesen mit Standardwert

localStorage.setItem('theme', 'dark');

const theme = localStorage.getItem('theme') ?? 'light';
const lang = localStorage.getItem('lang') ?? 'de';

console.log(theme, lang);

dark de

Objekt als JSON speichern und sicher wieder einlesen

const loadSettings = () => {
  const raw = localStorage.getItem('settings');
  if (raw === null) return { fontSize: 16, notifications: true };
  try {
    return JSON.parse(raw);
  } catch {
    // Beschädigte Daten verwerfen
    localStorage.removeItem('settings');
    return { fontSize: 16, notifications: true };
  }
};

localStorage.setItem('settings', JSON.stringify({ fontSize: 18, notifications: false }));
console.log(loadSettings());

{ fontSize: 18, notifications: false }

Zahlen und Booleans korrekt zurückwandeln

localStorage.setItem('visits', 5);
localStorage.setItem('consent', false);

const visits = Number(localStorage.getItem('visits') ?? 0) + 1;
const consent = localStorage.getItem('consent') === 'true';

localStorage.setItem('visits', visits);
console.log(visits, consent, typeof localStorage.getItem('consent'));

6 false string

Robuster Zugriff, falls Storage blockiert ist

const safeGet = (key, fallback = null) => {
  try {
    return window.localStorage.getItem(key) ?? fallback;
  } catch (err) {
    // z. B. SecurityError bei blockierten Cookies/Drittanbieter-iframes
    console.warn('Storage nicht verfügbar:', err.name);
    return fallback;
  }
};

console.log(safeGet('token', 'kein Token'));

kein Token

// Wichtig · Fallstricke

Nur Strings: getItem() liefert immer einen String oder null. localStorage.getItem('flag') gibt nach setItem('flag', false) den String "false" zurück, und der ist truthy. Deshalb explizit vergleichen (=== 'true').
null statt undefined: Anders als der Eigenschaftszugriff localStorage.foo, der undefined liefert, gibt getItem() für fehlende Schlüssel null zurück. getItem() ist außerdem sicherer, weil es nicht mit eingebauten Methodennamen wie key oder length kollidiert.
JSON.parse(null) ergibt null und keinen Fehler. Bei beschädigten Daten wirft JSON.parse dagegen einen SyntaxError, daher in try/catch einschließen.
Ausnahmen: Schon der Zugriff auf window.localStorage kann einen SecurityError werfen, etwa wenn Cookies blockiert sind, in manchen Sandbox-iframes oder in Drittanbieter-Kontexten. Im privaten Modus älterer Safari-Versionen war der Speicher auf 0 Byte begrenzt.
Sicherheit: Web Storage ist für jedes Skript derselben Origin lesbar. Tokens oder personenbezogene Daten sind dort anfällig für XSS. Gelesene Werte nie ungeprüft per innerHTML ausgeben, sondern textContent verwenden. Für Sitzungstokens sind HttpOnly-Cookies die bessere Wahl.
Performance: Der Zugriff ist synchron. Häufig gelesene Werte am besten einmal auslesen und im Speicher zwischenhalten.
Kompatibilität: Wird von allen modernen Browsern unterstützt, aber nicht in Web Workern oder Service Workern (dort ist localStorage nicht verfügbar). In Node.js gibt es die Methode erst ab Version 22 als experimentelle Funktion (--experimental-webstorage).

Siehe auch

Storage Storage.setItem() Storage.removeItem() Storage.clear() Storage.key() Window.localStorage Window.sessionStorage JSON.parse()