Ausführliche Erläuterung der HTML5Web-Speicherbeispiele

HTML5 Webspeicher, eine bessere lokale Speichermethode als Cookie.

Was ist HTML5 Web Storage?

Mit HTML5 können die Browserdaten der Benutzer lokal gespeichert werden.

Früher wurden beim lokalen Speicher Cookies verwendet. Der Webspeicher muss jedoch sicherer und schneller sein. Die Daten werden nicht auf dem Server gespeichert, sondern nur verwendet, wenn Benutzer Website-Daten anfordern. Es können auch große Datenmengen gespeichert werden, ohne die Leistung der Website zu beeinträchtigen.

Daten liegen in Schlüssel/Wert-Paaren vor und die Daten einer Webseite können nur von dieser Webseite abgerufen und verwendet werden.

Browser-Unterstützung

Internet Explorer 8+, Firefox, Opera, Chrome und Safari unterstützen Webspeicher.

Hinweis: Internet Explorer 7 und frühere IE-Versionen unterstützen keinen Webspeicher.

localStorage und sessionStorage

Es gibt zwei neue Objekte zum Speichern von Daten auf dem Client:

localStorage – Datenspeicherung ohne zeitliche Begrenzung

sessionStorage – Datenspeicherung für eine Sitzung

Bevor Sie Web Storage nutzen, sollten Sie prüfen, ob der Browser localStorage und sessionStorage unterstützt:

if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

localStorage Object

Die vom localStorage-Objekt gespeicherten Daten haben keine zeitliche Begrenzung. Die Daten sind auch nach dem nächsten Tag, der nächsten Woche oder dem nächsten Jahr noch verfügbar.

Instanz

localStorage.lastname="Smith";document.getElementById("result").innerHTML="Last name: "+ localStorage.lastname;

Instanzanalyse:

Erstellen Sie ein localStorage-Schlüssel/Wert-Paar mit key="lastname" und value="Smith"

Rufen Sie den Wert mit dem Schlüssel „lastname“ ab und fügen Sie die Daten mit id="result" in das Element ein.

Tipp: Schlüssel/Wert-Paare werden normalerweise als Zeichenfolgen gespeichert. Sie können dieses Format entsprechend Ihren Anforderungen konvertieren.

Das folgende Beispiel zeigt, wie oft der Benutzer auf die Schaltfläche geklickt hat. Der Zeichenfolgenwert im Code wird in einen numerischen Typ konvertiert:

if (localStorage.clickcount)
  {
  localStorage.clickcount=Number(localStorage.clickcount)+1;
  }
else
  {
  localStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

sessionStorage-Objekt

Die sessionStorage-Methode zielt darauf ab, eine Sitzung zur Datenspeicherung durchzuführen. Wenn der Benutzer das Browserfenster schließt, werden die Daten gelöscht.

So erstellen Sie einen Sitzungsspeicher und greifen darauf zu:

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  }
else
  {
  sessionStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

[Verwandte Empfehlungen]

1. Besondere Empfehlung : „php Programmer Toolbox“ V0.1 Version herunterladen

2. Kostenloses h5-Online-Video-Tutorial

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der HTML5Web-Speicherbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!