Heim >Web-Frontend >H5-Tutorial >Einführung in WebStorage für die lokale Speicherung von HTML5
WebStorage ist eine der lokalen Speicherlösungen in HTML5, IE User Data, Flash Cookie, Google Gears und andere unzuverlässige Lösungen mit unzuverlässigen Namen Das Programm verwendet ausschließlich Cookies. Einige Studenten fragen sich vielleicht, warum wir das Konzept von WebStorage einführen müssen, da wir über einen lokalen Cookie-Speicher verfügen.
Die Mängel von Cookies sind sehr offensichtlich
1 Datengröße: Als Speichercontainer ist die Größe von Cookies auf etwa 4 KB begrenzt, was insbesondere für aktuelle komplexe Geschäftslogikanforderungen (4 KB) sehr ärgerlich ist Neben der Speicherung einiger Konfigurationsfelder speichert die Kapazität auch einfache Einzelwertinformationen. Die meisten Entwickler wissen wirklich nicht, was sie erwartet.
2. Sicherheitsprobleme: Da das Cookie in der HTTP-Anfrage im Klartext übergeben wird (HTTPS nicht), sind die Sicherheitsprobleme immer noch riesig.
3. Netzwerkbelastung: Wir wissen, dass Cookies an jede HTTP-Anfrage angehängt und in den Headern von HttpRequest und HttpResponse übertragen werden, sodass einige unnötige Verkehrsverluste entstehen.
WebStorage ist eine der neuen lokalen Speicherlösungen für HTML, aber es handelt sich nicht um einen Standard, der entwickelt wurde, um Cookies zu ersetzen. Cookies sind als Teil des HTTP-Protokolls zur Abwicklung der Client- und Serverkommunikation unverzichtbar. Sie sind von der Implementierung abhängig Clientseitige Zustandsaufbewahrung. Der Zweck von WebStorage besteht darin, das Problem der lokalen Speicherung zu lösen, die nicht mit Cookies erfolgen sollte, sondern Cookies verwenden muss.
WebStorage bietet zwei Arten von APIs: localStorage und sessionStorage. Der Unterschied zwischen den beiden lässt sich grob anhand der Namen erkennen, wenn man sich die Namen anschaut: localStorage speichert Daten dauerhaft lokal, sofern sie nicht explizit gelöscht oder gelöscht werden, und sessionStorage speichert Daten nur während der Sitzung . Gültig, es wird automatisch gelöscht, wenn der Browser geschlossen wird. Beide Objekte haben eine gemeinsame API
interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key); void clear();
};
In dem Browser, der WebStorage implementiert, verfügt die Seite über zwei globale Objekte localStorage und sessionStorage
Nehmen Sie localStorage als Beispiel Bei einem einfachen Operationscode
var ls=localStorage;
console.log(ls.length);//0
ls.setItem('name','Byron');
ls.setItem('age','24');
console.log(ls.length);//2
//遍历localStorage
for(var i=0;i<ls.length><h3> Ereignis</h3>
<p> Gleichzeitig schreibt HTML5 ein Speicherereignis vor, das bei Änderungen im WebStorage ausgelöst wird. Damit können Sie Speicheränderungen auf verschiedenen Seiten überwachen</p>
<pre class="brush:php;toolbar:false">interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};
ist in index.php
definiert<a>Test</a>
window.addEventListener('storage',function(e){
console.log(e.key+' is changed form '+e.oldValue+' to '+e.newValue+' by '+e.url );
console.log(e.storageArea ==localStorage);
},false);
localStorage.setItem('userName','Byron');
test.php
localStorage.setItem('userName','Casper');
Klicken Sie auf den Link auf der Seite index.php, um zu besuchen. Beim Testen von.php können Sie das Konsolenausgabeprotokoll von index.php sehen:
Benutzername wurde von http von Byron in Casper geändert: //localhost/test.php
true
1 Apropos WebStorage: Allgemeine Browser bieten 5 MB Speicherplatz, was nicht ausreicht, um Videos und Bilder zu speichern, aber dafür Die meisten Vorgänge
2. Aus Sicherheitsgründen wird WebStorage nicht als HTTP-Header gesendet, daher relativ sicher
3 In Bezug auf den Datenverkehr kann unnötiger Datenverkehr eingespart werden. Dies ist sehr gut für häufige Besuche oder Webseiten, die auf mobile Geräte ausgerichtet sind.
Das bedeutet nicht, dass WebStorage Cookies ersetzen kann, aber mit WebStorage können Cookies nur das tun, was sie tun sollen – als Kanal für die Interaktion zwischen dem Client und dem Server dienen und den Client-Status aufrechterhalten. Somit ist WebStorage als lokale Speicherlösung den Cookies überlegen.
1. Browserkompatibilität: Dies ist unter allen neuen HTML5-Funktionen fast die einfachste Implementierung, da sie von IE8+-Browsern unterstützt wird und mit IE-Benutzerdaten in IE7 und IE6 implementiert werden kann.
2. Da localStorage und sessionStorage beide Objekte sind, können Sie Schlüssel-Wert-Paare auch über „.key“ oder „[key]“ abrufen und ändern, dies wird jedoch nicht empfohlen
localStorage.userName='Frank'; console.log(localStorage['userName']);
3. LocalStorage hingegen schon Lokal gespeichert, speichern verschiedene Browser Daten unabhängig voneinander, sodass in Chrome gespeicherter LocalStorage nicht in Firefox abgerufen werden kann.
4. localStorage und sessionStorage können nur String-Typen speichern, die von ECMAScript bereitgestellt werden, um sie zu verarbeiten. Für niedrigere Versionen von IE können Sie json2.js verwenden
5. Zusätzlich zur Konsole bietet Chrome auch eine sehr intuitive Anzeigemethode für den lokalen Speicher, die beim Debuggen sehr praktisch ist. Für weitere Programmierkenntnisse besuchen Sie bitte:
Website zum Programmieren! !Das obige ist der detaillierte Inhalt vonEinführung in WebStorage für die lokale Speicherung von HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!