Html5 localStorage Erste Schritte-Tutorial

Der schreibgeschützte localStorage ermöglicht Ihnen den Zugriff auf den Remote-(Ursprungs-)Objektspeicher eines Dokuments; Daten werden als browserübergreifende Sitzung gespeichert. localStorage ähnelt sessionStorage, der Unterschied besteht darin, dass die in localStorage gespeicherten Daten unbegrenzt sind, während die in sessionStorage gespeicherten Daten gelöscht werden, wenn die Seitensitzung endet, also wenn die Seite geschlossen wird.

Die Anzahl der Schlüssel-Wert-Paare in localStorage.

 localStorage.length // 0localStorage.setItem('name', 'mazey')localStorage.length // 1

LocalStorage-Schlüssel-Wert-Paare hinzufügen/aktualisieren.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Speicher {Alter: 23, Name: mazey, Länge: 2}

Entspricht:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // Speicher {Alter: 23, Name: mazey, Länge: 2}

Ruft den Wert des angegebenen Schlüssels in localStorage ab.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.getItem('name') // mazeylocalStorage.getItem('age') // 23localStorage.getItem('sex ') // null

Entspricht:

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.sex // undefiniert

Entfernt das Schlüssel-Wert-Paar für den angegebenen Schlüssel aus localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Speicher {Alter: 23, Name: mazey, Länge: 2}localStorage.removeItem('age') / / undefiniertlocalStorage // {Name: Mazey, Länge: 1}localStorage.removeItem('age') // undefiniert

Löschen Sie alle Schlüssel-Wert-Paare in localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Speicher {Alter: 23, Name: mazey, Länge: 2}localStorage.clear()localStorage // Speicher {Länge: 0}

localStorage kann nur Zeichenfolgen speichern, daher müssen komplexe Werte wie Arrays/Objekte zuerst mit JSON.stringify() in Zeichenfolgen konvertiert und dann vor der Verwendung mit JSON.parse() in komplexe Werte konvertiert werden.

 let arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) ​​​​// [1, 2, 3]

Lassen Sie das Fenster den Speicher von localStorage überwachen. Wenn sich der localStorage eines Labels ändert, reagieren andere Labels entsprechend.

test0.html – LocalStorage ändern.

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> function setNameForStorage () { localStorage.name = document.querySelector('#input'). Wert </script>

test1.html – reagiert auf localStorage-Änderungen.

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // name 123 })</script>

1. localStorage kann nur unter demselben Domänennamen verwendet werden und kann mit postMessage und iframe verwendet werden, um eine domänenübergreifende Kommunikation zu erreichen.
2. Niedrigere IE-Versionen unterstützen localStorage nicht.
3. Es muss in einer Serverumgebung verwendet werden, das heißt, es kann nicht in abnormalen Umgebungen wie file:// verwendet werden.
4. Im mobilen LocalStorage (H5, IOS, Android) können unvorhersehbare Probleme auftreten.

Bitte beenden Sie die Verwendung des lokalen Speichers

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.