Detaillierte Erläuterung von HTML5 -Speichermethoden SessionStorage und LocalStorage

Kommentar: Webspeicher in HTML5 enthält zwei Speichermethoden: SessionStorage und LocalStorage. SessionStorage wird verwendet, um Daten in einer Sitzung lokal zu speichern, auf die nur auf den Seiten derselben Sitzung zugegriffen werden kann, und die Daten werden nach Ablauf der Sitzung zerstört.

1. Der Unterschied zwischen Webspeicher und Cookies

Das Konzept des Webspeichers ähnelt Cookies. Der Unterschied besteht darin, dass es für die Speicherung größerer Kapazität ausgelegt ist. Die Größe des Keks ist begrenzt, und jedes Mal, wenn Sie eine neue Seite anfordern, wird das Cookie übersendet, die unsichtbare Bandbreite verschwendet. Darüber hinaus muss der Cookie angegeben werden und kann nicht über Domänen hinweg aufgerufen werden.

Darüber hinaus verfügt der Webspeicher von SetItem, GetItem, RemoveItem, Clear und anderen Methoden. Im Gegensatz zu Cookies müssen Front-End-Entwickler SetCookies und Getcookies selbst zusammenfassen.

Cookies sind jedoch auch unverzichtbar: Die Funktion von Cookies besteht darin, mit dem Server zu interagieren und als Teil der HTTP -Spezifikation vorhanden zu sein, während Webspeicher nur so erstellt wird, dass Daten lokal gespeichert werden (Korrektur von @Otakustay)

2. Der Browser -Support -Status des HTML5 -Webspeichers

Mit Ausnahme von IE7 und unten unterstützen andere Standardbrowser dies voll und ganz (IE und FF müssen auf dem Webserver ausgeführt werden). Es ist erwähnenswert, dass der IE immer gute Dinge tut. Zum Beispiel sind UserData in IE7 und IE6 tatsächlich eine Lösung für die lokale Speicherung von JavaScript. Durch die einfache Codekapselung kann es für alle Browser einheitlich sein, die den Webspeicher unterstützen.

Um festzustellen, ob der Browser LocalStorage unterstützt, können Sie den folgenden Code verwenden:

ALERT ("Stöbern Sie in Lokalstor")

}

anders

{

ALERT ("Browsing unterstützt keine Lokalstorage")

}

// oder if (typeof window.localStorage == 'undefined') {alert ("Browsing unterstützt Lokalstorage nicht")}}

3.. Lokalstor- und SessionStorage -Operationen

LocalStorage und SessionStorage haben beide die gleichen Betriebsmethoden wie SetItem, GetItem und REMETItem usw.

Methoden von LocalStorage und SessionStorage:

SetItem Speicherwert

Zweck: Wert im Schlüsselfeld speichern

Verwendung: .SetItem (Schlüssel, Wert)

Codebeispiel:

LocalStorage.SetItem ("Site", "JS8.in");

GetItem erhalten Wert

Zweck: Lassen Sie den Wert lokal in der angegebenen Taste gespeichert

Verwendung: .GetItem (Schlüssel)

Codebeispiel:

var Site = localStorage.getItem ("Site");

Entfernen Sie die Taste löschen

Zweck: Löschen Sie den Wert, der lokal im angegebenen Schlüssel gespeichert ist

Verwendung: .RemoveItem (Schlüssel)

Codebeispiel:

LocalStorage.RemoveItem ("Site");

Löschen Sie den gesamten Schlüssel/Wert

Zweck: Löschen Sie alle Schlüssel/Werte

Verwendung: .Clear ()

Codebeispiel:

LocalStorage.Clear ();

4. Andere Betriebsmethoden: Punktbetrieb und []

Der Webspeicher kann nicht nur ein eigenes SetItem, GetItem usw. verwenden, um den Zugriff zu erleichtern, sondern auch den DOT (.) -Preiber und [] Methode, um Daten wie gewöhnliche Objekte wie den folgenden Code zu speichern:

var Storage = window.localStorage; Storage.Key1 = "Hallo";

Speicher ["Key2"] = "World";

console.log (Storage.Key1);

console.log (speicher ["key2"]);

5. Die Schlüssel- und Längeneigenschaften von LocalStorage und SessionStorage werden implementiert, um zu Traverse

KEY () und Länge, die von SessionStorage und LocalStorage bereitgestellt werden, können die gespeicherten Datenquellen problemlos implementieren, z. B. den folgenden Code:

var Storage = window.localStorage;

für (var i = 0, len = storle.length; i <len; i ++)

{

var key = storate.Key (i);

var value = Storage.getItem (Schlüssel);

console.log (Schlüssel + "=" + Wert);

}

6. Speichereignisse

Speicher bietet auch Speichereignisse. Wenn sich der Schlüsselwert ändert oder klar ist, kann das Speicherereignis ausgelöst werden. Zum Beispiel fügt der folgende Code ein Anhörungsanlagen für Speicherereignisänderungen hinzu:

window.adDeVentListener ("Speicher", Handle_Storage, False);

}

sonst wenn (window.attachEvent)

{

window.attachEvent ("OnStorage", Handle_Storage);

}

Funktion handle_storage (e) {

if (! e) {e = window.event;}

}

Die spezifischen Eigenschaften des Speichereignisobjekts sind wie folgt:

PropertyTyPedescription

Keystring der benannte Schlüssel, die hinzugefügt, entfernt oder geändert wurde

oldvalueanythe früherer Wert (jetzt überschrieben) oder null, wenn ein neuer Artikel hinzugefügt wurde

Newvalueanythe neuer Wert oder Null, wenn ein Artikel hinzugefügt wurde

URL/UristringDie Seite, die die Methode bezeichnete, die diese Änderung auslöste