JavaScript (oft als JS abgekürzt) ist eines der Fundamente der modernen Web-Infrastruktur. Es ist eine leichtgewichtige, interpretierte, objektorientierte Programmiersprache, die First-Class-Funktionen unterstützt. JavaScript ist vor allem für seine Implementierung in dynamischen Webseiten bekannt. Aufgrund seiner Funktionen wird JavaScript jedoch auch in Nicht-Browser-Umgebungen verwendet.
In dieser Anleitung werden wir zwei JavaScript-Objekte: localStorage und sessionStorage.
localStorage und sessionStorage Übersicht
Die Objekte localStorage und sessionStorage werden als Teil der Web Storage API angeboten. Es ist ein großartiges Tool zur lokalen Speicherung von Schlüssel-Wert-Paaren. Die Verwendung von localStorage und sessionStorage ist eine hervorragende Alternative zu Cookies. Dieser Ansatz bietet einige zusätzliche Vorteile:
- Daten werden lokal gespeichert und können nicht vom Server gelesen werden. Dies eliminiert die Sicherheitsprobleme von Cookies.
- Es ermöglicht eine höhere Speicherkapazität (bis zu 10 MB bei den meisten modernen Browsern).
- Einfache und unkomplizierte Syntax.
Diese Objekte werden von allen modernen Webbrowsern unterstützt, sodass es keine Probleme mit der Browserkompatibilität gibt. Cookies sind in vielen Situationen immer noch nützlich, zum Beispiel bei der Authentifizierung. Es gibt jedoch Situationen, in denen localStorage und sessionStorage bessere Lösungen bieten.
Voraussetzungen
Um die in diesem Tutorial gezeigten Schritte auszuführen, benötigen Sie die folgenden Komponenten:
- Einen ordnungsgemäß konfigurierten Linux-Server. Diese Anleitung zeigt das Einrichten Ihres eigenen Ubuntu-Servers auf CloudSigma.
- Node.js als JavaScript-Laufzeitumgebung. Erfahren Sie hier mehr über das Installieren von Node.js auf Ubuntu.
- Einen modernen Webbrowser, zum Beispiel Google Chrome oder Firefox.
Zur Demonstration haben wir eine Beispiel-Webseite mit einem angehängten JS-Skript verwendet. Sie können hier mehr über das Hinzufügen von JavaScript zu einer HTML-Datei erfahren:
Als Texteditor verwenden wir Visual Studio Code:
Was ist der Unterschied zwischen localStorage und sessionStorage?
Sowohl localStorage als auch sessionStorage stammen aus derselben API. Ihr Verhalten ist ebenfalls identisch. Der einzige Unterschied liegt in der Art und Weise, wie jedes Objekt die Datenpersistenz ermöglicht. Im Fall von sessionStorage, bleiben die Daten bestehen, bis das Fenster oder der Tab geschlossen wird. Bei localStorage, bleiben die Daten bestehen, bis der Browser-Cache geleert wird oder die Web-App sie löscht.
In diesem Tutorial konzentrieren wir uns hauptsächlich auf localStorage. Die Syntax für sessionStorage ist jedoch dieselbe. Wir zeigen, wie Sie Schlüssel/Wert-Paare mit localStorage.
Step 1 – Einträge erstellen
Wir können einen Eintrag im localStorage-Objekt deklarieren, indem wir setItem() verwenden. Diese Methode akzeptiert zwei Argumente: den Schlüssel und den entsprechenden Wert. Die Struktur der Methode ist wie folgt:
|
1 |
localStorage.setItem(<key>, <value>) |
Im folgenden Beispiel haben wir eine Variable key erstellt. Mit der setItem()-Methode haben wir einen neuen key definiert und seinen Wert auf ‘value’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Step 2 – Einträge lesen
Wie lesen wir nun den im Schlüssel gespeicherten Wert aus? Um einen Schlüssel aus localStorage abzurufen, verwenden wir die Methode getItem(). Sie übernimmt den Namen des Schlüssels und gibt die im Schlüssel gespeicherten Werte zurück. Wir verwenden die alert()-Methode, um den abgerufenen Inhalt anzuzeigen:
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
Öffnen Sie als Nächstes die Webseite in einem Webbrowser. Sie sollte den Wert anzeigen, der im key:
gespeichert ist.
Sobald ein Wert festgelegt ist, bleibt er so, es sei denn, er wird geändert. Wenn wir die setItem()-Methode erneut auf demselben key anwenden, wird der alte Wert automatisch durch den neuen ersetzt.
Im folgenden Beispiel wird der key zuerst mit dem Wert ‘value’ initialisiert. In der nächsten Zeile haben wir setItem() erneut aufgerufen und den Wert auf ‘new value gesetzt.’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Sehen wir uns an, was passiert, wenn wir diesen Code im Browser ausführen:
Wie wir sehen können, ist der Wert des Keys eingestellt auf ‘neuen Wert’.
Schritt 4 – Einträge löschen
Wenn mehrere Einträge im localStorage (und sessionStorage ebenfalls) vorhanden sind, die nicht mehr benötigt werden, wird empfohlen, sie anschließend zu löschen. Dies gibt mehr Speicherplatz für die spätere Verwendung frei. Die App wird dadurch auch speichereffizienter.
Um einen Eintrag aus dem localStorage zu löschen, gibt es eine eigene Methode removeItem(). Sie nimmt den Key als Argument entgegen und entfernt ihn aus dem localStorage Datenpool:
|
1 |
localStorage.removeItem(<key_to_remove>) |
Implementieren wir es in unserem Skript:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
Nach der Ausführung lautet die Ausgabe null, da kein Wert existiert für den Key:
Schritt 5 – Einträge leeren
Im vorherigen Beispiel haben wir nur einen Key entfernt. Jedoch ermöglicht localStorage das Leeren aller gespeicherten Elemente in einem einzigen Schritt. Um alle Einträge zu leeren, bietet localStorage die Methode clear(). Sie benötigt kein Argument:
|
1 |
localStorage.clear(); |
Setzen wir die Methode in Aktion:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Genau wie zuvor werden alle Einträge aus dem localStorage entfernt. Wenn Sie also versuchen, auf den Wert des Key-Wert zuzugreifen, erhalten Sie null:
Schritt 6 – Arbeiten mit JSON
-
Speichern von Objekten und Arrays
Die Objekte localStorage und sessionStorage können nur String-Werte speichern. Es wird jedoch Zeiten geben, in denen Sie mit Objekten oder Arrays arbeiten müssen. In diesem Fall müssen wir sie in einen String konvertieren.
JavaScript bietet die Funktion JSON.stringify() an, die das Array/Objekt entgegennimmt und in Strings konvertiert. Dieser Beitrag bietet einen schnellen Überblick über das JSON-Format. Eine ausführlichere Anleitung finden Sie unter JSON in JavaScript.
In diesem Beispiel haben wir ein Objekt sampleObj mit zwei Feldern name und location erstellt. Wir konvertieren es in einen String und speichern es unter dem Key:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Hier ist die Ausgabe der String, der die Daten des Objekts enthält:
-
Lesen von Objekten und Arrays
Beim Speichern haben wir Objekte und Arrays in Strings konvertiert. Wir können diesen String auch wieder in sein ursprüngliches Format zurückkonvertieren. Dazu verwenden wir die Methode JSON.parse(). Sie nimmt einen String entgegen und konvertiert ihn zurück in das JSON-Format:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
Was die Ausgabe betrifft, so haben wir sie wieder in einen String konvertiert und für eine bessere Ansicht formatiert:
Schritt 7 – Überprüfen auf ein Element im localStorage
In diesem Abschnitt zeigen wir einen einfachen Test, um festzustellen, ob localStorage und sessionStorage ein Element enthalten oder nicht. Mit einer einfachen if-Anweisung können wir die Länge von localStorage oder sessionStorage überprüfen. Wenn Elemente vorhanden sind, ist die Länge größer als 0.
Implementieren Sie zuerst das folgende Beispiel:
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
Hier wird die Ausgabe ‘true’ sein, da ein Schlüssel vorhanden ist in localStorage:
Schritt 8 – Iterieren über Elemente
Das localStorage- und sessionStorage-Objekt speichert die Schlüssel in einer array-ähnlichen Struktur. Sie unterstützen die forEach-Methode nicht, daher müssen wir die klassische Technik der Verwendung einer for -Schleife anwenden, um über jedes Element zu iterieren.
In dem folgenden Beispiel prüfen wir, ob localStorage leer ist oder nicht. Wenn es nicht leer ist, iterieren wir über jedes Element:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
Die Ausgabe zeigt alle Elemente nacheinander an:
Schritt 9 – Browser-Unterstützung prüfen
Wir können die Unterstützung für localStorage (und sessionStorage) prüfen, indem wir feststellen, ob es auf dem window-Objekt verfügbar ist. Eine einfache if -Anweisung genügt bereits:
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Führen Sie den Code im Webbrowser aus:
Fazit
Diese Anleitung hat gezeigt, wie man localStorage und sessionStorage -Objekte in JavaScript verwendet, um Schlüssel-Wert-Paare im Browser zu speichern. Die Syntax ist sehr einfach zu handhaben. Wir haben gezeigt, wie man Schlüssel-Wert-Paare erstellt, entfernt und aktualisiert. Wir haben uns auch mit dem Speichern von Objekten und Arrays befasst, indem wir sie in Strings umgewandelt haben (und umgekehrt).
Um Ihre JavaScript-Kenntnisse weiter zu vertiefen, können Sie die folgenden Tutorials aus unserem Blog lesen::
- Grundlagen von JavaScript: So arbeiten Sie mit Datum und Uhrzeit
- JavaScript: Ein Tutorial zum Indizieren, Aufteilen und Bearbeiten von Strings
- Arbeiten mit JavaScript: Wie Klassen funktionieren
- Arbeiten mit JavaScript: Wie Prototypen und Vererbung funktionieren
Viel Spaß beim Programmieren!
Kommentare
Noch keine Kommentare. Schreiben Sie den ersten.