Detaillierte Erläuterung der HTMl5-Speichermethoden sessionStorage und localStorage_html5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Detaillierte Erläuterung der HTMl5-Speichermethoden sessionStorage und localStorage_html5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:48:12

Original

1669 Leute haben es durchsucht

Daher handelt es sich bei sessionStorage nicht um einen dauerhaften lokalen Speicher, sondern nur um einen Speicher auf Sitzungsebene. LocalStorage wird für die dauerhafte lokale Speicherung verwendet, sofern die Daten nicht aktiv gelöscht werden.
1. Der Unterschied zwischen Webspeicher und Cookies
Das Konzept des Webspeichers ähnelt dem von Cookies, der Unterschied besteht jedoch darin, dass er für eine größere Speicherkapazität konzipiert ist. Die Größe des Cookies ist begrenzt und das Cookie wird jedes Mal gesendet, wenn Sie eine neue Seite anfordern, was Bandbreite verschwendet. Darüber hinaus muss das Cookie einen Bereich angeben und kann nicht domänenübergreifend aufgerufen werden.
Darüber hinaus verfügt Web Storage über setItem, getItem, removeItem, clear und andere Methoden. Im Gegensatz zu Cookies müssen Front-End-Entwickler setCookie und getCookie selbst kapseln.
Aber Cookies sind auch unverzichtbar: Cookies dienen der Interaktion mit dem Server und existieren als Teil der HTTP-Spezifikation, während Web Storage nur dazu dient, Daten lokal zu „speichern“ (Korrektur von @otakustay)
2. Browser-Unterstützung für HTML5-Webspeicher
Mit Ausnahme von IE7 und niedriger werden andere Standardbrowser vollständig unterstützt (dh und FF müssen auf dem Webserver ausgeführt werden). Es ist erwähnenswert, dass IE immer gut funktioniert Beispielsweise ist UserData in IE7 und IE6 tatsächlich eine Lösung für die lokale Speicherung von Javascript. Durch einfache Codekapselung können alle Browser vereinheitlicht werden, um Webspeicher zu unterstützen.
Um festzustellen, ob der Browser localStorage unterstützt, können Sie den folgenden Code verwenden:

Kopieren Sie den Code

Der Code lautet wie folgt:

if(window.localStorage){
Alert("Browsing unterstützt localStorage")
}
else
{
Alert("Browsing unterstützt nicht localStorage")
}
//oder if(typeof window.localStorage == 'undefiniert'){ Alert("Browsing unterstützt localStorage noch nicht") }

3. LocalStorage und sessionStorage-Operationen
Sowohl localStorage als auch sessionStorage haben die gleichen Operationsmethoden, wie z. B. setItem, getItem und removeItem usw.
Methoden von localStorage und sessionStorage:
setItem speichert den Wert
Verwendung: Store Wert in Schlüsselfeld
Verwendung: .setItem(key, value)
Codebeispiel:

Code kopieren

Der Code lautet wie folgt:

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem ruft Wert ab
Zweck: Den angegebenen Schlüssel lokal speichern. Wert
Verwendung: .getItem(key)
Codebeispiel:

Kopieren Code

Der Code lautet wie folgt:

var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");

removeItem-Löschschlüssel
Zweck: Löschen des angegebenen lokal gespeicherten Schlüsselwerts
Verwendung: .removeItem(key)
Codebeispiel:

Code kopieren

Der Code lautet wie folgt:

sessionStorage.removeItem("key");
localStorage.removeItem("site");

clear alle Schlüssel/Werte löschen
Zweck: alle Schlüssel/Werte löschen
Verwendung: .clear()
Codebeispiel:

Code kopieren

Der Code lautet wie folgt:

sessionStorage.clear();
localStorage.clear();

4 . Andere Operationsmethoden: Punktoperation und []
Webspeicher Sie können nicht nur Ihr eigenes setItem, getItem usw. für den bequemen Zugriff verwenden, sondern auch den Punktoperator (.) und [] verwenden Speichern Sie Daten wie ein normales Objekt, wie der folgende Code:

Code kopieren

Der Code lautet wie folgt:

var storage = window.localStorage;
storage["key2"] = "world";
console.log(storage["key2"]);

5. localStorage Implementieren Sie die Traversierung mit den Schlüssel- und Längenattributen von sessionStorage
Der von sessionStorage bereitgestellte Schlüssel () und localStorage kann das Durchlaufen gespeicherter Daten problemlos implementieren, z. B. den folgenden Code:

Code kopierenDer Code lautet wie folgt:

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i )
{
var key = storage.key( i);
var value = storage.getItem(key);
console.log(key "=" value);

6 Storage stellt auch Speicherereignisse bereit. Wenn sich der Schlüsselwert ändert oder gelöscht wird, kann das Speicherereignis beispielsweise einen Listener für Speicherereignisänderungen hinzufügen:

Code kopierenDer Code lautet wie folgt:

if(window.addEventListener){

window.addEventListener("storage",handle_storage, false);

}
else if(window.attachEvent)
{
window.attachEvent("onstorage",handle_storage);
function handle_storage(e){
if( !e){e=window.event;}
}

Die spezifischen Attribute des Speicherereignisobjekts sind wie folgt: