Detaillierte Erklärung und Verwendung von sessionStorage und localStorage von HTML5

Web Storage in HTML5 umfasst 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.

Der Unterschied zwischen Web Storage und Cookies

Das Konzept von Web Storage ähnelt dem von Cookies, der Unterschied besteht jedoch darin, dass es 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“ (von @otakustay Correction)

Browserunterstü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 installiert sein) (läuft ein)), es ist erwähnenswert dass der IE immer gute Dinge leistet. 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:

if(window.localStorage){     
    alert("浏览支持localStorage");
}else{    
    alert("浏览暂不支持localStorage");
} //或者 
if(typeof window.localStorage == 'undefined'){ 
    alert("浏览暂不支持localStorage");
}

localStorage- und sessionStorage-Vorgänge

Sowohl localStorage als auch sessionStorage haben dieselbe Operationsmethode. wie setItem , getItem und removeItem usw.

Methoden von localStorage und sessionStorage

setItem speichert den Wert

Verwendung: Wert im Schlüsselfeld speichern
Verwendung: .setItem (Schlüssel, Wert)
Codebeispiel:

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

getItem ruft Wert ab

Zweck: Den lokal für den angegebenen Schlüssel gespeicherten Wert abrufen
Verwendung: .getItem(key)
Codebeispiel:

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 :

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

clear Alle Schlüssel/Werte löschen

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

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

Andere Operationsmethoden: Punktoperation und []

Web Storage kann nicht nur sein eigenes setItem, getItem usw. für den bequemen Zugriff verwenden, sondern auch den Punktoperator (.) und [] verwenden Speichern Sie Daten wie gewöhnliche Objekte. Code wie der folgende:

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

Die Schlüssel- und Längenattribute von localStorage und sessionStorage implementieren Traversal

Der von sessionStorage und localStorage bereitgestellte Schlüssel () kann bequem verwendet werden Implementieren Sie die Durchquerung gespeicherter Daten, zum Beispiel den folgenden Code:

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); 
}

Speicherereignis

Speicher stellt auch Speicherereignisse bereit. Wenn sich der Schlüsselwert ändert oder gelöscht wird, kann das Speicherereignis ausgelöst werden. Beispielsweise wird der folgende Code zur Überwachung einer Speicherereignisänderung hinzugefügt:

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 Eigenschaften des Speicherereignisobjekts lauten wie folgt:

Eigenschaftstypbeschreibung

key String Der benannte Schlüssel, der hinzugefügt, entfernt oder geändert wurde  

oldValue  Any  Der vorherige Wert (jetzt überschrieben) oder null, wenn ein neues Element hinzugefügt wurde  

newValue  Any  Der neue Wert, oder null, wenn ein Element hinzugefügt wurde  

url/uri String Die Seite, die die Methode aufgerufen hat, die diese Änderung ausgelöst hat

Web Storage Demo

HTML5-Demos: Storage Web Storage-Beispiel