Detaillierte Erläuterung der HTMl5-Speichermethoden sessionStorage und localStorage

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der HTMl5-Speichermethoden sessionStorage und localStorage vor. Jetzt kann ich ihn mit Ihnen teilen.

Web Storage in HTML5 enthält zwei Speichermethoden: sessionStorage und localStorage. sessionStorage wird zum lokalen Speichern von Daten in einer Sitzung verwendet. Auf diese Daten kann nur von Seiten in derselben Sitzung zugegriffen werden, und die Daten werden zerstört, wenn die Sitzung endet. 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("浏览支持localStorage") 
}
else
{    
    alert("浏览暂不支持localStorage") 
} 
//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }

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
Zweck: Wert im Schlüsselfeld speichern
Verwendung: .setItem(key, value)
Codebeispiel:

Code kopieren

Der Code lautet wie folgt:

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

getItem ruft den Wert ab
Verwendung: Den lokal gespeicherten Wert für das angegebene Objekt abrufen Schlüssel
Verwendung: .getItem(key)
Codebeispiel:

Code kopieren

Der Code ist wie folgt folgt:

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

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

Code kopieren

Der Code lautet wie folgt:

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

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 []
Web Storage kann nicht nur sein eigenes setItem, getItem usw. für den bequemen Zugriff verwenden, sondern auch das Punkt (.)-Operator und [] wie gewöhnliche Objekte zum Speichern von Daten, wie der folgende Code:

Code kopieren

The Der Code lautet wie folgt:

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

5. Die Schlüssel- und Längenattribute von localStorage und sessionStorage. Traversal implementieren
Der von sessionStorage und localStorage bereitgestellte Schlüssel () und die Länge können gespeicherte Daten problemlos implementieren Durchquerung, wie zum Beispiel der folgende Code:

Code kopieren

Der 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. Speicherereignis
Speicher bietet auch Speicherereignisse, die ausgelöst werden können, wenn sich der Schlüsselwert ändert oder gelöscht wird. Der folgende Code fügt beispielsweise einen Listener für Speicherereignisänderungen hinzu:

Kopieren Sie den Code

Der 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 :

Property	Type	Description
key	String	The named key that was added, removed, or moddified
oldValue	Any	The previous value(now overwritten), or null if a new item was added
newValue	Any	The new value, or null if an item was added
url/uri	String	The page that called the method that triggered this change

Verwandte Empfehlungen:

Zusammenfassung aller HTML5-Tags und Erklärung der Tag-Bedeutungen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der HTMl5-Speichermethoden sessionStorage und localStorage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!