JavaScript Storage API

Einführung in die Storage API

In der modernen Webentwicklung ist eine effiziente Datenverwaltung entscheidend. Die Web Storage API von JavaScript bietet eine einfache, synchrone Möglichkeit, Schlüssel/Wert-Paare direkt im Browser zu speichern — ohne Serveranfragen. Sie ist das gebräuchlichste Werkzeug, um Benutzereinstellungen zu speichern, kleine Datemengen zu cachen und den UI-Zustand über Seitenneuladen hinweg zu erhalten.

Dieser Leitfaden behandelt die beiden Speicherobjekte, die die API bereitstellt — localStorage und sessionStorage — zusammen mit dem vollständigen Methodensatz, dem Speichern von Objekten, dem Reagieren auf Änderungen über Tabs hinweg und den häufigen Fallstricken. Beide Objekte teilen dieselbe Schnittstelle (das Storage-Interface); der einzige Unterschied ist wie lange die Daten gespeichert bleiben und wie weit sie geteilt werden.

Da Web Storage niemals an den Server gesendet wird, eignet es sich nicht für Authentifizierungstoken, die das Backend benötigt — dafür sind Cookies zuständig.

Das Storage-Interface

Jeder Wert im Web Storage ist ein string. Sowohl localStorage als auch sessionStorage stellen dieselben fünf Methoden sowie eine length-Eigenschaft bereit:

Die folgenden Beispiele verwenden localStorage, aber jede Methode funktioniert identisch auf sessionStorage.

localStorage verstehen

localStorage speichert Daten ohne Ablaufdatum. Die Daten bleiben auch nach dem Schließen und Wiederöffnen des Browserfensters erhalten, was es ideal für langlebige Daten wie Benutzereinstellungen, eine Theme-Wahl oder ein Formularentwurf macht.

Daten in localStorage speichern

Verwenden Sie die setItem-Methode mit einem Schlüssel und einem Wert, um Daten zu speichern:

// Storing data in localStorage
localStorage.setItem('username', 'JohnDoe');

Beide Argumente werden zu strings umgewandelt. Das Schreiben von setItem('count', 5) speichert tatsächlich den string "5", also vergessen Sie nicht, beim Lesen wieder zu konvertieren.

Daten aus localStorage abrufen

Verwenden Sie getItem, um einen Wert zurückzulesen. Wenn der Schlüssel nicht existiert, erhalten Sie null (nicht undefined):

// Retrieving data from localStorage
const username = localStorage.getItem('username');
console.log(username);                 // "JohnDoe"
console.log(localStorage.getItem('missing')); // null

Daten aus localStorage entfernen

Löschen Sie einen einzelnen Schlüssel mit removeItem oder bereinigen Sie alles für die Origin mit clear:

// Remove one key
localStorage.removeItem('username');

// Remove every key for this origin
localStorage.clear();

clear() betrifft nur die aktuelle Origin (Schema + Host + Port); sie berührt niemals die Daten einer anderen Website.

Objekte speichern: JSON.stringify und JSON.parse

Da Speicherwerte strings sein müssen, können Sie kein Objekt direkt speichern — setItem('user', {name: 'Ann'}) würde den nutzlosen string "[object Object]" speichern. Serialisieren Sie mit JSON.stringify beim Einlesen und JSON.parse beim Auslesen:

const user = { name: 'Ann', theme: 'dark', visits: 3 };

// Save: serialize the object to a JSON string
localStorage.setItem('user', JSON.stringify(user));

// Load: parse the string back into an object
const restored = JSON.parse(localStorage.getItem('user'));
console.log(restored.theme); // "dark"
console.log(restored.visits + 1); // 4

Weitere Informationen zur Serialisierung finden Sie unter Arbeiten mit JSON, und die Grundlagen zu Objekten unter JavaScript Objects.

Gespeicherte Schlüssel durchlaufen

Verwenden Sie length zusammen mit key(index), um alles zu durchlaufen, was für die Origin gespeichert ist:

localStorage.setItem('a', '1');
localStorage.setItem('b', '2');

for (let i = 0; i < localStorage.length; i++) {
  const name = localStorage.key(i);
  console.log(`${name} = ${localStorage.getItem(name)}`);
}
// a = 1
// b = 2

sessionStorage nutzen

sessionStorage teilt die identische API, hat aber eine kürzere, tab-spezifische Lebensdauer. Daten werden gelöscht, wenn die Sitzung endet — das heißt, wenn der Tab geschlossen wird. Das Öffnen derselben Website in einem zweiten Tab erstellt einen separaten sessionStorage, sodass die beiden Tabs niemals die Daten des jeweils anderen sehen. Das macht es perfekt für Daten, die nicht zwischen Tabs durchsickern sollen, wie z. B. der Fortschritt eines mehrstufigen Assistenten.

// Store, read, and remove — same methods as localStorage
sessionStorage.setItem('sessionName', 'Session1');
console.log(sessionStorage.getItem('sessionName')); // "Session1"
sessionStorage.removeItem('sessionName');

Auf Änderungen über Tabs hinweg reagieren

Wenn sich localStorage in einem Tab ändert, löst der Browser ein storage-Ereignis in jedem anderen Tab derselben Origin aus (aber nicht in dem Tab, der die Änderung vorgenommen hat). Dadurch können Sie mehrere Tabs synchronisieren — beispielsweise den Benutzer überall gleichzeitig abmelden:

window.addEventListener('storage', (event) => {
  // event.key, event.oldValue, event.newValue, event.url
  if (event.key === 'theme') {
    console.log('Theme changed in another tab to', event.newValue);
  }
});

Hinweis: Das storage-Ereignis wird nur für localStorage ausgelöst (tab-übergreifend geteilt), nicht für sessionStorage.

Fehler und Limits behandeln

Schreibvorgänge können einen QuotaExceededError auslösen, wenn Sie das ~5-MB-Limit überschreiten, und der Speicher kann im privaten Browsermodus oder bei deaktivierten Cookies ganz nicht verfügbar sein. Umhüllen Sie Schreibvorgänge mit try...catch und prüfen Sie die Verfügbarkeit, bevor Sie sich auf die API verlassen:

function safeSet(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (err) {
    // QuotaExceededError, or storage blocked by the browser
    console.warn('Storage write failed:', err.name);
    return false;
  }
}

console.log(safeSet('theme', 'dark')); // true (when storage is available)

Best Practices für die Verwendung von Web Storage

• Sicherheit: Berücksichtigen Sie stets die Sicherheitsimplikationen beim Speichern sensibler Daten im Browser. Vermeiden Sie das Speichern vertraulicher Informationen wie Passwörter oder persönlicher Identifikationsdaten.
• Speicherlimits: Beachten Sie die Speicherbeschränkungen (in der Regel etwa 5 MB) und behandeln Sie Fälle, in denen der Speicher möglicherweise voll ist.
• Cross-Browser-Kompatibilität: Stellen Sie sicher, dass Ihr Code Szenarien behandelt, in denen ein Browser die Storage APIs möglicherweise nicht unterstützt.
• Nur string-Speicherung: Web Storage akzeptiert nur strings. Verwenden Sie JSON.stringify() zum Speichern von Objekten und JSON.parse() zum Abrufen.
• Tab-übergreifende Synchronisierung: Verwenden Sie das StorageEvent, um auf Änderungen zu hören, die in anderen Tabs vorgenommen wurden, und halten Sie die Daten synchronisiert.

Ein vollständiges Beispiel zum besseren Verständnis

Diese Demo zeigt, wie die Web Storage API verwendet wird, einschließlich sowohl localStorage als auch sessionStorage. Sie haben Schaltflächen zum Speichern, Abrufen und Entfernen von Daten aus dem Speicher:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Storage API Interactive Demo</title>
  </head>
  <body>
    <h2>localStorage and sessionStorage Demo</h2>
    <div style="display: flex; gap: 10px">
      <button onclick="storeInLocal()">Store in localStorage</button>
      <button onclick="retrieveFromLocal()">Retrieve from localStorage</button>
      <button onclick="removeFromLocal()">Remove from localStorage</button>
    </div>

    <div style="margin: 20px 0" id="localStorageResult"></div>

    <div style="display: flex; gap: 10px; margin-top: 10px">
      <button onclick="storeInSession()">Store in sessionStorage</button>
      <button onclick="retrieveFromSession()">
        Retrieve from sessionStorage
      </button>
      <button onclick="removeFromSession()">Remove from sessionStorage</button>
    </div>

    <div style="margin-top: 20px" id="sessionStorageResult"></div>

    <script>
      function storeInLocal() {
        localStorage.setItem("demo", "Hi from LocalStorage!");
        document.getElementById("localStorageResult").textContent =
          "Stored in localStorage: " + localStorage.getItem("demo");
      }

      function retrieveFromLocal() {
        const value = localStorage.getItem("demo") || "Nothing in localStorage";
        document.getElementById("localStorageResult").textContent =
          "Retrieved from localStorage: " + value;
      }

      function removeFromLocal() {
        localStorage.removeItem("demo");
        document.getElementById("localStorageResult").textContent =
          "Item removed from localStorage.";
      }

      function storeInSession() {
        sessionStorage.setItem("demo", "Hi from SessionStorage!");
        document.getElementById("sessionStorageResult").textContent =
          "Stored in sessionStorage: " + sessionStorage.getItem("demo");
      }

      function retrieveFromSession() {
        const value =
          sessionStorage.getItem("demo") || "Nothing in sessionStorage";
        document.getElementById("sessionStorageResult").textContent =
          "Retrieved from sessionStorage: " + value;
      }

      function removeFromSession() {
        sessionStorage.removeItem("demo");
        document.getElementById("sessionStorageResult").textContent =
          "Item removed from sessionStorage.";
      }
    </script>
  </body>
</html>

• LocalStorage: Hier gespeicherte Daten bleiben auch nach dem Schließen und Wiederöffnen des Browsers erhalten, was es ideal für das Speichern von Benutzereinstellungen oder anderen Langzeitdaten macht.
• SessionStorage: Dies ähnelt localStorage, aber die Daten werden gelöscht, wenn die Sitzung endet (z. B. wenn der Browser geschlossen wird).

Durch Klicken auf die verschiedenen Schaltflächen können Sie sehen, wie Daten zu jedem Speichertyp hinzugefügt, abgerufen und daraus entfernt werden. Die Ergebnisse werden direkt unterhalb jeder Schaltfläche angezeigt, sodass Sie sofortiges Feedback darüber erhalten, was mit den Daten im Speicher passiert. Dieses interaktive Setup hilft Ihnen, zu visualisieren und zu verstehen, wie Webanwendungen Daten zwischen Seitenneuladen oder Browsersitzungen speichern können.

Neben der Interaktion mit den Speichervorgängen über die Schaltflächen in dieser Demo können Sie die gespeicherten Daten auch direkt in Ihrem Webbrowser anzeigen und verwalten. Öffnen Sie die Entwicklertools Ihres Browsers, navigieren Sie zum Bereich Application und schauen Sie dann unter dem Tab Storage nach. Hier können Sie die Einträge von localStorage und sessionStorage sehen.

Dieses visuelle Werkzeug ermöglicht es Ihnen, die Auswirkungen Ihrer Aktionen (wie Speichern und Entfernen von Daten) in Echtzeit zu sehen, und bietet eine praktische Möglichkeit zu erkunden, wie Web Storage in Browsern funktioniert.

Fazit

Die JavaScript Storage API bietet eine robuste und einfach zu bedienende Methode zur Datenverwaltung im Browser. Durch das Verstehen und Nutzen von localStorage und sessionStorage können Entwickler die Benutzererfahrung ihrer Webanwendungen erheblich verbessern. Berücksichtigen Sie stets Sicherheit und Speicherlimits, um sicherzustellen, dass Ihre Anwendungen robust und benutzerfreundlich sind. Mit diesen Werkzeugen können Sie persistente Zustände und Datenverwaltungsfunktionen erstellen, die für moderne Webanwendungen entscheidend sind.

Übungen