Wichtiges Wissen für SPA und React - Vollständiger Leitfaden zu Browser-Speichern

Serverseitige Frameworks wie Django oder Spring behandeln die Sessions meist auf dem Server und identifizieren Clients über Cookies. Das macht die Handhabung bequem, da der Server den Zustand verwaltet.

In einer Umgebung wie SPA (Single Page Application) mit React, Vue oder Angular spielt jedoch der Client (Browser) eine bedeutende Rolle. Die Kommunikation mit dem Server erfolgt hauptsächlich über APIs, während der Benutzerstatus und die UI-Einstellungen oft direkt im Client verwaltet werden.

Hierbei müssen Sie entscheiden, "wo" die Daten gespeichert werden sollen, und der Browser bietet einige Speicheroptionen. Es ist entscheidend, die Eigenschaften und Zwecke jedes Speichers eindeutig zu kennen, um eine effektive SPA-Entwicklung zu gewährleisten.

Heute schauen wir uns die wesentlichen Speicher des Browsers an: Cookies, Local Storage, Session Storage und IndexedDB.

1. Cookies

Cookies sind das Urgestein der Browserspeicher. Ursprünglich wurden sie entwickelt, um den Zustand zwischen Server und Client aufrechtzuerhalten (Stateful).

• Eigenschaften:

  • Kleine Größe: Die Größenbeschränkung liegt bei etwa 4KB und ist damit sehr klein.

  • Serverübertragung: Dies ist das größte Merkmal. Cookies werden automatisch bei allen HTTP-Anfragen an den Server gesendet. Das ist nützlich, wenn der Server den Status des Clients kennen muss, kann jedoch auch die Leistung durch unnötige Datenübertragungen beeinträchtigen.

  • Ablaufdatum: Mit den Attributen Expires oder Max-Age kann das Ablaufdatum und die Uhrzeit festgelegt werden. Wenn dies nicht erfolgt, funktioniert es als Sitzungscookie (wird beim Schließen des Browsers gelöscht).

  • Sicherheitsoptionen: Es können Sicherheits-Einstellungen wie HttpOnly (verhindert Zugriff durch JavaScript) und Secure (nur über HTTPS) getroffen werden.

• Hauptanwendungen:

  • Authentifizierung: Speichert vom Server ausgegebene Login-Authentifizierungstoken (JWT usw.), sodass der Server den Benutzer bei jedem Seitenwechsel identifizieren kann. (Insbesondere in Verbindung mit der HttpOnly-Option)

  • Benutzerverfolgung und Werbung: Verwendet, um das Besucherverhalten und die Besuchshistorie zu verfolgen. (z.B. Google Analytics)

  • 'Nicht mehr anzeigen' Pop-up

2. Local Storage

Ein Teil des Web Storage API, das mit HTML5 eingeführt wurde. Es wurde entwickelt, um die Nachteile von Cookies (geringe Größe, automatische Serverübertragung) auszugleichen.

• Eigenschaften:

  • Große Größe: Für Browser unterschiedlich, im Allgemeinen jedoch 5MB bis 10MB ausreichend.

  • Keine Serverübertragung: Local Storage speichert Daten nur im Client und wird nicht automatisch an den Server übertragen. Er ist gut geeignet für Daten, die der Server nicht kennen muss.

  • Permanent: Daten werden permanent gespeichert. Die Daten verschwinden nicht, solange der Benutzer nicht manuell den Browser-Cache löscht oder localStorage.removeItem() aufruft.

  • Einfache API: Bietet eine einfach zu verwendende API, wie localStorage.setItem('key', 'value'), localStorage.getItem('key'). (Nur Strings können gespeichert werden)

• Hauptanwendungen:

  • Speichern von Benutzereinstellungen: Wenn Benutzeroberflächeneinstellungen wie Dunkel- oder Hellmodus sowie Spracheinstellungen gespeichert werden sollen.

  • Speichern von nicht vertraulichen Daten: Liste zuletzt angeschauter Inhalte, Auto-Save-Funktionen usw.

  • Daten-Caching: Cache von Daten, die sich in API-Antworten nicht häufig ändern, um die Anzahl der Anfragen zu reduzieren.

3. Session Storage

Teilt fast alle Eigenschaften mit Local Storage, hat jedoch einen entscheidenden Unterschied im Lebenszyklus der Daten.

• Eigenschaften:

  • Große Größe: Ähnlich wie Local Storage bietet es etwa 5MB an Speicherplatz.

  • Keine Serverübertragung: Daten werden nur im Client gespeichert.

  • Session-basierter Lebenszyklus: Daten sind auf den aktuellen Browser-Tab (oder das Fenster) beschränkt. Wenn dieser Tab geschlossen wird, werden alle Daten im Session Storage sofort gelöscht.

  • Datenisolierung: Selbst bei derselben Domain wird der Daten nicht zwischen verschiedenen Tabs geteilt.

• Hauptanwendungen:

  • Einmalige Datenspeicherung: Für Informationen, die nur in diesem Tab relevant sein sollen.

  • Temporäre Formulardaten: Zum temporären Speichern von Eingaben während der Registrierung oder Umfragen in mehreren Schritten, solange der Benutzer den Tab nicht schließt.

  • Beibehaltung von Daten beim Aktualisieren: Daten sollten beim Aktualisieren der Seite beibehalten, jedoch beim Schließen des Tabs gelöscht werden.

4. IndexedDB

Während Local und Session Storage einfache Key-Value Speicher sind, ist IndexedDB ein vollwertiges Transaktionsdatenbanksystem, das im Browser existiert.

• Eigenschaften:

  • Großspeicher: Speichert sehr große Datenmengen, von hunderte MB bis mehrere GB, je nach den erlaubten Festplattenspeicher des Benutzers (abhängig von den Browser-Richtlinien).

  • Vielfältige Datentypen: Neben Strings können auch JavaScript-Objekte, Dateien (Blob), Arrays und komplexe Datenstrukturen gespeichert werden.

  • Transaktionsunterstützung: Gewährleistet die Integrität und Konsistenz der Daten. Mehrere Operationen können in einer Einheit verarbeitet werden.

  • Asynchrone API: Alle Operationen von IndexedDB werden asynchron verarbeitet, wodurch die Haupt-UI-Thread während der Lese- und Schreibvorgänge für große Mengen Daten nicht blockiert wird und die Reaktionsfähigkeit der App aufrechterhalten bleibt.

  • Indexunterstützung: Es können Indizes erstellt werden, um Daten anhand bestimmter Felder sehr schnell zu durchsuchen.

• Nachteile:

  • Komplexe API: Im Vergleich zu localStorage ist die API viel komplizierter und schwieriger zu verwenden. (Deshalb verwenden viele Entwickler Wrapper-Bibliotheken wie Dexie.js, idb.)

• Hauptanwendungen:

  • Offline-Webanwendungen (PWA): Speichert wichtige Daten in Apps, die ohne Netzwerkverbindung funktionieren müssen. (z.B. Offline-Dokumenteneditor)

  • Cache für große Anwendungen: Wird verwendet, um ältere Gesprächsprotokolle in Browsern zu speichern oder komplexe Benutzerdaten zu verwalten.

  • Temporäre Speicherung von nutzergenerierten Inhalten: Sichere Speicherung langer Texte oder Bildbearbeitungsdaten, bevor sie an den Server hochgeladen werden.

5. Vergleich auf einen Blick

Die Eigenschaften der vier Speicher werden in der folgenden Tabelle zusammengefasst.

6. Fazit: Was sollte wann verwendet werden?

Bei der Entwicklung von SPAs wie React ist es gut, die Anwendungen dieser vier Speicher klar zu unterscheiden.

• Cookies:

  • Für Daten, die der Server unbedingt wissen muss. (z.B. sicherheitsrelevante Authentifizierungstokens)

  • Es empfiehlt sich, die HttpOnly-Option zu verwenden, um Tokens vor XSS-Angriffen zu schützen.

• Local Storage:

  • Für einfache Daten, die auch nach dem Schließen des Browsers erhalten bleiben sollen.

  • (z.B. Benutzeroberflächenthemen, Spracheinstellungen)

• Session Storage:

  • Für temporäre Daten, die nur während der aktuellen Sitzung (Tab) benötigt werden.

  • (z.B. temporäre Speicherung während mehrstufiger Formulareingaben)

• IndexedDB:

  • Wenn strukturierte große Daten oder Offline-Unterstützung erforderlich sind.

  • (z.B. komplexe App-Zustände, caching von Gesprächsprotokollen, Offline-Dokumentendaten)

Wichtiger Sicherheitshinweis: Local Storage, Session Storage und IndexedDB sind leicht über JavaScript zugänglich. Das bedeutet, dass sie anfällig für XSS (Cross-Site-Scripting) Angriffe sind. Passwörter, persönliche Identifikationsinformationen und sensible Authentifizierungstokens dürfen dort niemals gespeichert werden. (Die Verwendung von HttpOnly-Cookies ist die sicherste Methode für Authentifizierungstokens.)