So speichern und abrufen Daten im Browser

Webbrowser können Webspeicher verwenden, um Daten lokal zu speichern und abzurufen. Das Speichern von Daten im Webbrowser ist sicherer und verbessert auch die Leistung der Website. Im Gegensatz zu Cookies ist der Webspeicher viel höher und die Daten werden nicht auf den Server übertragen. Der Webspeicher basiert auf dem Protokoll und der Domäne, und alle Seiten einer einzelnen Quelle können die gleichen Informationen speichern und abrufen.

In dieser Beschreibung wird das Verfahren für diskutiert Speicherung Und Daten abrufen im Browser. Darüber hinaus werden Beispiele zur Verwendung von Lokalstor- und SessionStorage -HTML -Webobjekten bereitgestellt. So lass uns anfangen!

Webspeicherobjekte im Browser

Zwei Webspeicherobjekte werden von der HTML bereitgestellt, die Sie zum Speichern und Abholen der Daten verwenden können. “lokaler Speicher”Ist eine Art HTML -Speicher, der kein Ablaufdatum hat, während die“ die “SessionStorageObjekt speichern nur die Informationen zu einer einzigen Sitzung. Das Schließen der aktuellen Registerkarte Browser entfernen alle gespeicherten Daten.

Stellen Sie vor der Verwendung von LocalStorage und SessionStorage sicher, dass der HTML -Webspeicher von Ihrem Browser unterstützt wird:

if (typeof (speicher) !== "undefiniert")
// Code für HTML -Speicherobjekte aufschreiben
anders
// Ihr Browser wird nicht unterstützt

Lokalstorage -HTML -Webspeicherobjekt im Browser

Wie bereits erwähnt, haben die im lokalen Storage -Objekt gespeicherten Daten kein Verfallsdatum und werden nicht gelöscht, selbst wenn Ihr Browser geschlossen ist. Die gespeicherten Daten können am nächsten Tag, Woche oder Jahr abgerufen werden.

Beispiel 1: Verwenden von Lokalstorage -HTML -Webspeicherobjekt im Browser

Im folgenden Beispiel werden wir eine "erstellen"lokaler Speicher"Webobjekt mit einem"Name: Wert" Paar:

Führen Sie das oben gegebene Programm in Ihrem bevorzugten Code-Editor oder einer Online-Codierungssandbox aus. Wir werden das JSBin jedoch für diesen Zweck verwenden:

Wie Sie aus der Ausgabe erkennen können, haben wir Daten erfolgreich gespeichert und abgerufen mit dem “lokaler Speicher”HTML -Webobjekt:

Sie können auch den folgenden Code für denselben Zweck ausführen:

Das angegebene Beispiel zeigt Ihnen auch die gleiche Ausgabe:

Wenn Sie einen Artikel oder Eintrag aus Ihrem LocalStorage -Objekt entfernen möchten, müssen Sie das anrufen “Gegenstand entfernen()Methode und übergeben die “NameElement als Argument:

lokaler Speicher.removeItem ("Name");

Beispiel 2: Verwenden von Lokalstorage -HTML -Webspeicherobjekt im Browser

Schauen wir uns ein anderes Beispiel an. Im untergegebenen JavaScript-Programm das “lokaler SpeicherDas Objekt zählt und speichert die Anzahl, mit der ein Benutzer auf die “geklickt hatKlicken" Taste:

Klicken

Klicken Sie auf die Schaltfläche, um den Zählerwert zu überprüfen.

Hier zeigt die Ausgabe eine “Klicken" Taste; Klicken Sie darauf, um den Schaltflächenwert zu überprüfen:

Zunächst wurde der Wert von ButtonClickcounter auf “gesetzt“0,Und es wird inkrementiert, wenn wir auf die Schaltfläche klicken:

SessionStorage HTML -Webspeicherobjekt im Browser

Die HTML "SessionStorage"Objekt funktioniert das gleiche wie"lokaler Speicher„; Sie können es jedoch nur zum Speichern und Abrufen von Daten für die aktuelle Sitzung verwenden. Sobald die geöffnete Browser -Registerkarte geschlossen ist, werden alle gespeicherten Daten gelöscht.

Beispiel 2: Verwenden von SessionStorage -HTML -Webspeicherobjekt im Browser

Das folgende JavaScript -Programm speichert und abgerufen die “ButtonClickCount”Für die aktuelle Sitzung. Der ButtonClickCount wird hinzugefügt, um die Anzahl der mit der bereitgestellten Schaltfläche angegeben zu zählen:

Klicken

Klicken Sie auf die Schaltfläche, um den Zählerwert zu überprüfen.

Wenn Sie auf die hervorgehobene Taste klicken, wird die in der “gespeicherten Daten abgerufen.“SessionStorage" Taste:

Abschluss

Entwickler können nutzen lokaler Speicher Und SessionStorage HTML -Webobjekte, um Daten im Browser zu speichern und abzurufen. LocalStorage -Objekt hat kein Ablaufdatum, während SessionStorage nur die Informationen zu einer einzigen Sitzung speichert. Das Schließen der aktuellen Registerkarte Browser entfernen alle gespeicherten Daten. In diesem Artikel wurde das Verfahren zum Speichern und Abrufen von Daten im Browser erläutert. Darüber hinaus werden auch Beispiele zur Verwendung von Lokalstorage und SessionStorage HTML -Webobjekten zur Verfügung gestellt.