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.

Cookie ist geschwollen

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

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

• Länge: das einzige schreibgeschützte Attribut, das verwendet wird, um die Anzahl der Schlüssel-Wert-Paare im Speicher zu ermitteln.
• key: Rufen Sie den Schlüsselnamen des Speichers basierend auf dem Index ab.
• getItem: Rufen Sie den entsprechenden Wert im Speicher basierend auf dem Schlüssel ab.
• setItem: Fügen Sie dem Speicher ein Schlüssel-Wert-Paar hinzu.
• removeItem: Löschen Sie den Schlüssel -Wertepaar basierend auf dem Schlüsselnamen
• clear: Speicherobjekt löschen

Verwenden

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

• Schlüssel: der Schlüssel des Schlüssel-Wert-Paar
• alterWert: der Wert vor der Änderung
• neuerWert: Änderung Der nachfolgende Wert
• url: Die Seiten-URL, die die Änderung ausgelöst hat
• StorageArea: Der geänderte Speicher

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

Warum ist es besser als Cookies

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.

Hinweise

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!