Sitzungs- und lokaler Speicher sind Browser-Speichermethoden, mit denen Sie Daten zusammen mit zustandslosen HTTP-Anforderungen speichern können. Sie sind eine Alternative zur Cookie-basierten Speicherung und haben viele Verwendungsmöglichkeiten in der Webentwicklung.

Obwohl sie auf sehr ähnliche Weise funktionieren, gibt es erhebliche Unterschiede, die Sie beachten sollten.

Lokaler Speicher und Sitzungsspeicher: Wozu dienen sie?

Lokaler und Sitzungsspeicher sind JavaScript-APIs, die Sie zum Speichern von Daten auf der Clientseite verwenden können. Sie ermöglichen es einer Website, Daten im Browser zu speichern und den Browser anzuweisen, später darauf zuzugreifen.

Je nach Bedarf können Sie lokale oder Sitzungsspeicher zum Speichern von Daten verwenden. Beide Speichermethoden ähneln Cookies, jedoch ohne die gleichen Datenschutzbedenken rund um Cookies. Daher verwenden die meisten modernen Websites lieber nur Webspeichermethoden oder kombinieren sie mit Cookies als Fallback.

Im Gegensatz zu Cookies senden Local Storage und Session Storage keine Daten über HTTP-Header an den Server. Sie sollten sie nur für clientseitige Funktionen verwenden.

Darüber hinaus haben lokaler und Sitzungsspeicher jeweils ein Speicherlimit von etwa 5 MB pro Domäne. Sie bieten mehr Speicherplatz als Cookies, die nur eine Kapazität von 4 KiB pro Cookie haben.

Was ist Sitzungsspeicher?

Eine Browsing-Sitzung entspricht ungefähr Ihrer Nutzung einer Website. Wenn Sie eine Website besuchen, ein wenig herumstöbern und dann Ihren Computer ausschalten, können Sie sich diese Zeit als eine einzelne Sitzung vorstellen. Ihre Browserkonfiguration kann dies auf subtile Weise ändern, aber eine Sitzung soll den Zeitabschnitt darstellen, den Sie mit einer Website interagieren.

Die Sitzungsspeicherung ist für jeden Browser-Tab einzigartig. Wenn Sie einen neuen Tab öffnen und zur selben Website navigieren, starten Sie eine neue Sitzung mit eigenem Speicher. Wenn Sie jedoch in Ihrem Browser die Funktion „Tab duplizieren“ verwenden, kann dies dieselbe Sitzung wiederverwenden. Sie können sich nicht zu sehr auf die spezifischen Details einer "Sitzung" verlassen. Konzentrieren Sie sich stattdessen auf das Kernkonzept: Sitzungsspeicherung ist temporär.

Der Sitzungsspeicher verfügt über integrierte API-Methoden, um mit Schlüssel/Wert-Paardaten zu arbeiten. Sie können Daten von speichern JavaScript so:

sessionStorage.setItem("Schlüssel", "Wert");

Und um den gespeicherten Wert abzurufen:

sessionStorage.getItem("Schlüssel");

Beachten Sie, dass beides Schlüssel und Wert sind nur String-Typen. Wenn Sie einen anderen Typ speichern möchten, müssen Sie ihn explizit oder implizit in einen String konvertieren.

Was ist lokaler Speicher?

Der lokale Speicher verwaltet Daten über alle Instanzen einer Website hinweg, unabhängig davon, ob sie sich in verschiedenen Registerkarten oder Fenstern befinden. Es ist auch dauerhaft, sodass die Daten nicht verschwinden, wenn Sie Ihren Browser schließen.

Wenn Sie eine Website öffnen, die zuvor lokalen Speicher verwendet hat, hat sie immer Zugriff auf diese gespeicherten Daten.

Als Webentwickler können Sie diesen Mechanismus verwenden, um Daten über einen Benutzer aufzubewahren. Einige Websites verwenden dies möglicherweise, um Sie angemeldet zu halten oder eine personalisiertere Erfahrung zu bieten.

Wie beim Sitzungsspeicher können Sie ein lokales Speicherobjekt mit einer Zeile JavaScript-Code festlegen:

localStorage.setItem("Schlüssel", "Wert");

So greifen Sie auf den Wert des Schlüssels zu:

localStorage.getItem("Schlüssel");

Beachten Sie, dass diese Methoden genauso funktionieren wie die Sitzungsspeicherung, sie verwenden nur einen anderen Datenspeichertyp.

Während der Sitzungsspeicher Daten löscht, sobald die Sitzung beendet ist, besteht die einzige Möglichkeit zum Löschen des lokalen Speichers darin, ihn explizit zu löschen. Beide Speichertypen bieten zwei Methoden zum Löschen von Daten. Der erste entfernt ein bestimmtes Datenelement basierend auf seinem Schlüssel:

localStorage.removeItem("Schlüssel");

Sie können auch alle von Ihrer Website gespeicherten Daten entfernen, unabhängig von ihrem Schlüssel:

localStorage.clear();

Weitere Informationen zu diesen Webspeicher-API-Methoden finden Sie unter javascript.info Webseite.

Wann benötigen Sie lokalen Speicher?

Da der lokale Speicher dauerhaft ist, ist es am besten, Daten über Benutzerbesuche hinweg aufzubewahren. Wenn Sie Websiteeinstellungen speichern oder langfristige Daten zwischenspeichern möchten, ist die lokale Speicherung angemessen. Möglicherweise möchten Sie keine sensibleren Daten im lokalen Speicher speichern, da diese dauerhaft sind.

Da lokaler und Sitzungsspeicher Front-End-Methoden sind, sollten Sie sie möglicherweise nicht für serverbasierte Funktionen wie die Benutzeranmeldung verwenden. In diesen Fällen könnten Sie Cookies als Alternative in Betracht ziehen.

Wann benötigen Sie Sitzungsspeicher?

Wenn Sie Daten nur speichern möchten, während ein Benutzer mit Ihrer Website interagiert, ist die Sitzungsspeicherung ideal. Dabei kann es sich um kurzfristiges Caching oder Nutzungsdaten zu einem bestimmten Besuch Ihrer Website handeln.

Der Sitzungsspeicher eignet sich besser zum Speichern sensibler Informationen, da er abläuft.

Lokaler Speicher vs. Sitzungsspeicherung: Was ist sicherer?

Wie Sie gesehen haben, sind lokale und Sitzungsspeichermethoden in vielerlei Hinsicht ähnlich, haben aber dennoch maßgeschneiderte Anwendungsfälle. Sie sollten beides nicht als sicher betrachten, da es sich um Front-End-Technologien handelt, auf die JavaScript Zugriff hat. Die Sitzungsspeicherung ist jedoch sehr praktisch, und ihre vorübergehende Natur ist beruhigend.

Die lokale Speicherung ist dauerhaft und kann daher zusätzliche Sicherheitsbedenken aufwerfen. Jeder, der einen Browser öffnet, kann theoretisch auf den lokalen Speicher zugreifen. Sie sollten sich dessen bewusst sein wie XSS-Angriffe funktionieren und wie man sie verhindert.

Lokaler Speicher oder Sitzungsspeicher: Was sollten Sie verwenden?

Die Sitzungsspeicherung ist aufgrund ihrer temporären Natur etwas sicherer. Ihre Wahl der Webspeichermethode hängt jedoch von Ihren Anforderungen ab. Die JavaScript-Speicherung ist am besten nur für die clientseitige Verwendung geeignet. Aber es bietet einen komfortablen browserbasierten Datenspeicher und ist sehr einfach zu bedienen.

Denken Sie daran, dass der lokale Speicher zwar Daten auf mehreren Registerkarten speichert, der Sitzungsspeicher jedoch größtenteils für jede Registerkarte einzigartig ist. Sie sollten sicherstellen, dass Ihre App so wenige Annahmen wie möglich trifft und Grenzfälle berücksichtigt.

Cookies sind eine ältere Form der Datenpersistenz, werden aber immer noch häufig verwendet. Vielleicht möchten Sie sie auf Daten überprüfen, die Sie an den Server übertragen müssen.