sessionStorage, IndexedDB und die passende API

sessionStorage stellt exakt dieselben Methoden wie localStorage bereit, ist aber an die Lebensdauer des Tabs gebunden. Beim Schließen des Tabs oder Fensters werden seine Daten automatisch gelöscht.

Außerdem ist sessionStorage pro Tab isoliert, sodass zwei Tabs keine sessionStorage-Daten gemeinsam nutzen.

sessionStorage eignet sich hervorragend für einen mehrstufigen Assistenten, bei dem der Fortschritt während der Sitzung über Reloads hinweg erhalten bleiben, beim Schließen des Tabs aber verworfen werden soll.

Die Person kann das Formular zwischendurch neu laden, ohne Eingaben zu verlieren, und nach dem Abschluss oder Verlassen bleibt nichts zurück.

IndexedDB ist eine asynchrone, transaktionale Datenbank, die in den Browser integriert ist. Sie kann deutlich mehr als das 5-MB-Limit von localStorage speichern und strukturierte Objekte, Arrays sowie Binärdaten verarbeiten.

Da sie asynchron arbeitet, blockiert sie den Hauptthread nicht wie localStorage.

Die direkte IndexedDB-API ist ausführlich und ereignisbasiert. Bibliotheken wie idb-keyval kapseln sie daher in einfache Promise-basierte Funktionen wie get, set und del.

So erhalten Sie eine Bedienung ähnlich wie bei localStorage, kombiniert mit der Kapazität und dem asynchronen Verhalten von IndexedDB.

Da IndexedDB Werte vom Typ Blob und ArrayBuffer speichern kann, eignet sie sich ideal zum Zwischenspeichern von Bildern, Audiodateien, heruntergeladenen Dateien oder Offline-Assets.

Diese würden die Grenzen von localStorage schnell überschreiten und müssten in Zeichenketten umgewandelt werden, was bei IndexedDB nicht nötig ist.

Die Cache-API, die häufig mit Service Workern verwendet wird, speichert vollständige HTTP-Response-Objekte, die nach Anfrage zugeordnet sind. Sie wurde speziell für das Offline-First-Caching von Netzwerkantworten entwickelt.

Verwenden Sie sie, um Assets und API-Antworten offline bereitzustellen, ohne das Netzwerk aufzurufen.

localStorage bleibt dauerhaft erhalten, bis es gelöscht wird, sessionStorage gilt nur für die Sitzung des Tabs, IndexedDB bleibt ebenfalls dauerhaft erhalten, und Cookies haben über ihre Attribute ein konfigurierbares Ablaufdatum.

Wenn Sie die benötigte Lebensdauer auf den passenden Speicher abstimmen, vermeiden Sie Überraschungen darüber, wann Daten verschwinden.

localStorage und sessionStorage sind auf ungefähr 5 MB begrenzt, Cookies auf jeweils etwa 4 KB, während IndexedDB je nach Gerät und Browser Hunderte Megabyte oder mehr verwenden kann.

Für größere Datenmengen ist IndexedDB die einzige praktikable Option im Browser.

localStorage, sessionStorage und Cookies arbeiten synchron und blockieren während des Zugriffs den Hauptthread. IndexedDB und die Cache API arbeiten asynchron und basieren auf Promises.

Der asynchrone Zugriff hält die Benutzeroberfläche reaktionsfähig, auch wenn größere Datenmengen gelesen oder geschrieben werden.

Verwenden Sie httpOnly-Cookies für Authentifizierungstokens, damit Skripte sie nicht lesen können, localStorage für kleine dauerhafte Einstellungen, IndexedDB für große Dateien und komplexe Offline-Daten sowie sessionStorage für kurzlebige Entwürfe innerhalb eines Tabs.

Wählen Sie den Speicher passend zur Sensibilität, Größe und Lebensdauer der Daten.

Es gibt keine einzelne beste Storage-API; jede bietet unterschiedliche Kompromisse hinsichtlich Kapazität, Persistenz, Synchronisationsverhalten und Sicherheit. Wenn Sie diese Unterschiede kennen, können Sie bewusst auswählen.

Eine typische Anwendung verwendet mehrere Speicher: Cookies für die Authentifizierung, localStorage für Einstellungen und IndexedDB für Offline-Ressourcen.

Testen Sie Ihr Verständnis der verschiedenen Speicheroptionen.

Sie haben sessionStorage, localStorage, IndexedDB, Cookies und die Cache API hinsichtlich Persistenz, Kapazität, Synchronisationsverhalten und Sicherheit verglichen.

Sie haben gelernt, den Speicher nach dem Anwendungsfall auszuwählen: Cookies für die Authentifizierung, localStorage für kleine Einstellungen, IndexedDB für große oder komplexe Daten und sessionStorage für auf einen Tab begrenzte Entwürfe.