LocalStorage und SessionStorage | Erklärt

Die Web -API und die Web -Speicher -API sind zwei der nützlichsten APIs, die von den meisten Browsern unterstützt werden. Die Webspeicher -API beweist zwei Objekte, die die lokaler Speicher Speicher und die SessionStorage Dies hilft uns, unsere Daten in den Speicher des Browsers zu speichern. Beide Objekte ermöglichen es uns, Daten lokal zu speichern, wobei der einzige Unterschied darin besteht.

Diese Objekte können als Alternativen für Cookies angesehen werden und haben ihre Vorteile auch gegenüber Cookies. Dies ist nicht wahr, dass diese Objekte Cookies vollständig überholen können. Cookies können von Servern und anderen Webanwendungen gelesen werden, während die Daten, die lokal in Ihrem Browser gespeichert sind.

LocalStorage und SessionStorage | Syntax

Beide Objekte haben identische Funktionen mit identischen Syntaxen. Die Syntax für das LocalStorage -Objekt ist definiert als

lokaler Speicher.Funktion (Schlüssel, Wert);

In ähnlicher Weise wird für das SessionStorage -Objekt die Syntax definiert als

SessionStorage.Funktion (Schlüssel, Wert);

Funktionen von LocalStorage & SessionStorage

Beide Objekte aus der Webspeicher -API bieten 5 Funktionen und eine CONT -Variable unter:

• setItem (): Speichern Sie einen neuen Eintrag in der lokalen Speicherung in Form von Schlüsselwertpaaren
• getItem (): um einen Eintrag aus dem lokalen Speicher durch den Schlüssel zu holen
• Clear (): Um die lokale Speicherung des Browsers zu löschen
• remove (): um einen Wert aus dem lokalen Speicher mit einem Schlüssel zu entfernen
• KEY (): Um den Namen des Schlüssels mit seinem Indexwert zurückzugeben
• Länge (): Eine Variable, die die Anzahl der Einträge im lokalen Speicher speichert

LocalStorage und SessionStorage | Verwendung

Öffnen Sie den Browser Ihrer Wahl (Chrome in unserem Fall) und besuchen Sie eine Website wie www.Google.com.

Erstellen/Hinzufügen von Daten in LocalStorage mithilfe von SetItem () -Methode

Erstellen Sie eine neue Dateneingabe im lokalen Speicher, indem Sie in der folgenden Codezeile in der Konsole des Browsers eingeben:

lokaler Speicher.setItem ("Name", "John Doe");

Wenn der Befehl ohne Fehler ausgeführt wird, bedeutet dies, dass ein neuer Eintrag erfolgreich im Speicher des Browsers getätigt wurde.

Um dies zu überprüfen, gehen Sie in die Registerkarte „Anwendungen“ in den Tools des Entwicklers und erweitern Sie den lokalen Speicher. Sie sollten in der Lage sein, den Wert im Explorer zu sehen:

So greifen Sie mit der GetItem () -Methode auf Daten von LocalStorage aus/abzurufen

Um auf jeden Eintrag aus dem lokalen Speicher zuzugreifen, können Sie entweder einen Dot-Operator mit dem LocalStorage-Objekt verwenden und dann den Schlüssel eingeben oder die Funktion getItem () verwenden. Um auf den „Namen“ zuzugreifen, den wir gerade gespeichert haben, können wir entweder verwenden:

var name = localStorage.Name;
Konsole.Protokoll (Name)

Die Ausgabe ist als:

Oder wir können den Befehl wie gezeigt verwenden:

Konsole.Protokoll (LocalStorage.getItem ("name"));

Die Ausgabe ist als

Permanente Speicherung des LocalStorage -Objekts | Überprüfung

Um zu überprüfen.com)

Sie haben den goldenen Handshake beendet und die aktuellen Sitzungen mit der Website beendet, indem Sie die Browser schließen, den Browser wieder eröffnen und auf dieselbe Website gehen und dann in Entwicklertools> Anwendungen> lokaler Speicher gehen, um zu überprüfen, ob die Daten noch vorhanden sind oder nicht :

Alle oben genannten Schritte können mit dem SessionStorage -Objekt aus durchgeführt werden. Denken Sie jedoch daran, dass es alle Daten löscht, wenn die Sitzung abläuft. Lassen Sie uns die Demonstration sehen.

Erstellen/Hinzufügen von Daten in SessionStorage mithilfe von SetItem () -Methode

Wir werden zuerst einen neuen Eintrag im SessionStorage mit der folgenden Codezeile erstellen:

SessionStorage.setItem ("Job", "Auditor");

Die Konsole zeigt „undefinierte“ an, was bedeutet, dass der Befehl erfolgreich ohne Fehler ausgeführt wurde:

Wir können den Speicher auf der Registerkarte "Sitzungspeicher" überprüfen:

Schließen Sie die Browser und eröffnen Sie denselben Link und gehen Sie dann zu Entwickler -Tools> Anwendungen> Sitzungen Speicher. Sie sehen die folgenden Ergebnisse:

Sie können sehen, dass der Eintrag gelöscht wurde. Dies beweist, dass das SessionStorage -Objekt nur Daten im lokalen Speicher des Browsers für nur eine Sitzung speichert.

Abschluss

Die LocalStorage- und SessionStorage -Objekte werden verwendet, um Daten im lokalen Speicher des Browsers zu speichern. Sie sind Teil der Webspeicher -API. Beide Objekte bieten dem Benutzer 5 Funktionen, mit denen die Benutzer einen Eintrag aus dem lokalen Speicher erstellen, aktualisieren, erhalten und löschen können. Der Unterschied zwischen Lokalstor- und SessionStorage -Objekt besteht darin, dass das LocalStorage -Objekt die Daten dauerhaft gegen eine Website speichert, während das SessionStroage -Objekt die Daten nur für eine Sitzung speichert.