Sitzungsspeicherung in JavaScript

1. Webspeicher VS. Cookies
2. Webspeichertypen
3. das sessionStorage-Objekt in JavaScript
4. Datenelemente zum Sitzungsspeicher hinzufügen
5. Artikelwert für einen bereitgestellten Schlüssel abrufen
6. Element aus dem Sitzungsspeicher entfernen

Webspeicherung ist eine der revolutionären Funktionen, die mit der HTML5-Web-API eingeführt wurden. Es ermöglicht Ihnen, Daten auf der Client-Seite zu speichern, insbesondere im Browser.

Die Daten werden als Schlüssel-Wert-Paare im Webspeicher gespeichert. In der Welt des Webs wird es auch als DOM-Speicher bezeichnet.

Webspeicher VS. Cookies

Als Speichermechanismus ähnelt der Webspeicher eher Cookies. Mit dem Webspeicher können Sie bis zu 5 MB pro Domain/Browser-Registerkarte und Protokoll speichern.

Daher können die Webseiten aus derselben Quelle auf denselben Webspeicher zugreifen und diesen bearbeiten. Außerdem kann der Browser eine Warnmeldung ausgeben, wenn der Webshop voll belegt ist.

Bei Old-School-Cookies müssen diese bei jeder Serveranfrage gesendet werden, was sich negativ auf die Leistung auswirkt. Im Gegensatz zu Cookies sendet der Webspeicher keine Daten an den Server.

Daher verwendet es den lokalen Computerspeicher des Benutzers, um Daten schneller und sicherer als Cookies zu speichern.

Webspeichertypen

Es gibt zwei Haupttypen von Webspeicher, die mit der Webspeicher-API verfügbar sind. Jeder Typ wird basierend auf seiner Lebensdauer und seinem Umfang unterschieden.

Sitzungsspeicher

Die Sitzungsspeicherung beschränkt sich auf das Speichern von Daten pro Sitzung, wenn also der Browser neu geladen oder geschlossen wird, sind die Daten für immer weg.

Lokaler Speicher

Der lokale Speicher unterscheidet sich während seiner Lebensdauer geringfügig vom Sitzungsspeicher. Es kann Daten beibehalten, selbst wenn der Browser aktualisiert oder geschlossen und erneut geöffnet wird.

Daher haben die lokalen Speicherdaten kein Ablaufdatum, bis Sie die Daten mit der JavaScript-API löschen oder den Browser-Cache leeren.

In diesem Leitfaden konzentrieren wir uns auf die Implementierung des Sitzungsspeichers und seine Verwendung.

das sessionStorage-Objekt in JavaScript

Normalerweise implementiert das Window-Objekt des Browsers das WindowSessionStorage-Objekt, das die sessionStorage-Eigenschaft besitzt. Daher erstellt der Aufruf von window.sessionStorage eine Instanz des Web-Objekts Storage, wie im Folgenden gezeigt.

Sie können die Browserkonsole verwenden, um diese Beispiele einfach auszuprobieren.

Syntax:

window.sessionStorage

Im obigen Szenario ist der Sitzungsspeicher leer. Daher ist die Länge des zurückgegebenen Storage-Objekts Null.

Wie Sie alle wissen, ist das Objekt Fenster ein globales Objekt. Daher können wir direkt auf die Eigenschaft sessionStorage zugreifen, die immer noch ein Storage-Objekt zurückgibt.

sessionStorage

Dieses Objekt wird zum Hinzufügen, Ändern und Entfernen von Datenelementen aus dem Sitzungsspeicher verwendet.

Wichtig ist, dass die Sitzungsspeicherung vom Protokoll der geladenen Seite abhängt. Daher ist die Sitzungsspeicherung für dieselbe URL beim Zugriff über HTTP und HTTPS unterschiedlich.

Es werden einfach zwei separate Sitzungsspeicherplätze für HTTP- und HTTPS-Seiten erstellt.

Da das Objekt window.sessionStorage vom Objekt Storage abgeleitet ist, erbt es alle Methoden, die zum Bearbeiten des Sitzungsspeicherplatzes erforderlich sind.

Datenelemente zum Sitzungsspeicher hinzufügen

Wie oben erwähnt, können wir, wie im Folgenden gezeigt, die Methode setItem() des Storage-Objekts verwenden, um neue Datenelemente zum Sitzungsspeicherplatz hinzuzufügen.

window.sessionStorage.setItem('userVisitCount', 20);
window.sessionStorage.setItem('userBlockCount', 2);

Ausgang:

Die obigen Befehle sollten zwei Datenelemente mit den Namen userVisitCount und userBlockCount setzen. Sehen wir uns an, wie das Objekt Storage aussieht.

Sie können den Sitzungsspeicher ganz einfach über die Browser-Entwicklertools überprüfen. Öffnen Sie die Entwicklertools in Chrome und suchen Sie die Registerkarte Anwendung.

Auf der linken Seite des Fensters sehen Sie den Sitzungsspeicherbereich, wie im Folgenden gezeigt.

Artikelwert für einen bereitgestellten Schlüssel abrufen

Mit der Methode getItem des Objekts Storage können Sie den Wert eines angegebenen Item-Schlüssels abfragen.

window.sessionStorage.getItem('userVisitCount');

Ausgang:

Wie erwartet hat die Methode getItem() 20 zurückgegeben, was dem Wert von userVisitCount entspricht.

Element aus dem Sitzungsspeicher entfernen

Nach dem gleichen Muster wie setItem() und getItem() haben wir die Methode removeItem() erhalten, um Elemente aus dem Sitzungsspeicher zu entfernen. Lassen Sie uns das mit dem Schlüssel userVisitCount verknüpfte Element entfernen.

window.sessionStorage.removeItem('userVisitCount');

Ausgang:

Sehen wir uns noch einmal das Objekt Storage an.

Wie Sie sehen können, ist nur ein Element im Sitzungsspeicher verfügbar, und der Schlüssel userVisitCount ist nicht mehr vorhanden.

Außerdem können Sie den Sitzungsspeicher löschen, indem Sie die Methode clear() aufrufen. Dadurch würden alle Einträge im Objekt Storage gelöscht.

window.sessionStorage.clear();

Wie erwartet wurden alle Einträge aus dem Sitzungsspeicher gelöscht. Dieser Befehl ist sehr nützlich in Anwendungen, in denen Sie den Zustand der Webanwendung beibehalten und Daten zwischen Seiten im selben Browserfenster/Tab übertragen müssen, wie z. B. in Einkaufswagen.