So verwenden Sie Web Storage

Dieses Mal zeige ich Ihnen, wie Sie Web Storage verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Web Storage gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

localStorage-------sessionStorage

Web Storage-Funktionen:

1. -Einfache Speicherform vom Typ Wert

2. Es kann in der gleichen Form wie andere gewöhnliche Javascript-Objekte

3. Große Kapazität-->5M (im Vergleich zu Cookies)--(Cookies sind nur 4 KB groß und werden beim Senden einer Anfrage mitgebracht, was sich auf die Geschwindigkeit auswirkt)

4. Es kann nur darauf zugegriffen werden, wenn es aus derselben Quelle stammt

Im Folgenden wird localStorage als Beispiel verwendet ----》sessionStorage und localStorage sind grundsätzlich gleich, sessionStorage jedoch schon basierend auf der Sitzung. Verschwindet, wenn das Fenster geschlossen wird. Bei localStorage handelt es sich jedoch um lokal gespeicherte Daten, sofern sie nicht durch ein Programm oder manuell gelöscht werden.

ähnelt einem gewöhnlichen JavaScript-Objekt und Sie können Punktoperationen (.) und [ ]-Klammeroperationen verwenden, um auf Eigenschaften zuzugreifen.

Zum Beispiel: localStorage.setItem("foo","1") localStorage.foo="1" localStorage["foo"]="1"

Häufig verwendete APIs: setItem(), getItem(), clear().

Wenn das Objekt beim Lesen und Schreiben gespeichert wird, muss das Objekt zur Speicherung in JSONString konvertiert werden, und es werden zwei Funktionen JSON.stringify( eingeführt ) obj), JSON.parse(str)

Zum Beispiel: var obj={x:1,y:2} Speicher: localStorage.obj=JSON.stringify(obj), lesen:var obj2=localStorage.parse(localStorage.obj).

Datenaufzählung: 1. Durchquerung durch Schlüsselmethode und Längenattribut 2. für Durchquerung

1: für (var i= 0; i

2: for (var key in localStorage){ if(localStorage.hasOwnProperty(key)){var value=localStorage[key]; console.log(key+":"+value);} }

Speicherereignis

Nachdem ein Fenster die Daten des Webspeichers ändert, wird das Speicherereignis in allen Fenstern außer dem Fenster, in dem die Daten geändert werden, ausgelöst.

window.addEventListener('storage',function(event){ console.log(event.key) }.false);

Im Folgenden sind einige häufig verwendete Attribute von Ereignisobjekten aufgeführt.

Schlüssel (aktualisierter Schlüsselname), alter Wert (Wert vor Aktualisierung), neuer Wert (Wert nach Aktualisierung), URL (URL der aktualisierten Seite)

Namespace-Verwaltung ----Da die LocalStorage-Daten automatisch verschwinden, wenn sie falsch sind, wird die anschließende Verwaltung sehr schwierig, wenn zu viele Attribute wahllos hinzugefügt werden. Wir können es über Namespaces verwalten.

	var serviceName="SERVICENAME",storage=null;
	//通过load事件读取数据至本地变量
	window.onload=function(){
		try{
			storage=JSON.parse(localStorage[serviceName] || '{}');
		}catch{
			storage={};
		}
	}
	//通过onbeforeunload时间将数据写入localStorage
	window.onbeforeunload=function(){
		localStorage[serviceName]=JSON.stringify(storage)
	}
1. Schreiben Sie die Daten von localStorage in den lokalen Variablenspeicher, dann ist die Zugriffsgeschwindigkeit viel schneller als die Zugriffsgeschwindigkeit von localStroage. 

2. Verschiedene Seiten oder Module werden mit unterschiedlichen ServiceNamen benannt, um Attributnamenskonflikte zu vermeiden 
3. Da eine Seite nur einmal localStorage liest und schreibt Das Speicherereignis kann auf der Seite nicht ausgelöst werden. Daher müssen wir bei Bedarf Methoden kapseln, um localStorage-Daten zu aktualisieren oder Daten von anderen Registerkarten zu synchronisieren. 
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website. 
Empfohlene Lektüre: 

So verwenden Sie Yuansheng CSS3, um den Ringlade-Fortschrittsbalken zu implementieren

So greifen Sie auf JS-Objekteigenschaften und -methoden zu
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Web Storage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!