Was ist Web in HTML5? Was sind die Elemente im Webspeicher?

HTML5-Webspeicher, eine bessere lokale Speichermethode als Cookies. In diesem Artikel werden die Bedeutung und das Parsen von Elementen des HTML5-Webspeichers vorgestellt.

Was ist HTML5 Web Storage?

Mit HTML5 können Sie die Browserdaten des Benutzers lokal speichern.

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.

Die beiden Objekte, die zum Speichern von Daten auf dem Client verwendet werden, sind:

localStorage – wird zum langfristigen Speichern der Daten der gesamten Website verwendet Die gespeicherten Daten verfallen nicht, bis sie manuell entfernt werden.

sessionStorage - Wird zum vorübergehenden Speichern der Daten desselben Fensters (oder Tabs) verwendet. Die Daten werden nach dem Schließen des Fensters oder Tabs gelöscht.

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

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}localStorage 对象

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.

localStorage.sitename="PHP中文网教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;

Beispielanalyse:

Verwenden Sie key="sitename" und value="Rookie Tutorial", um ein localStorage-Schlüssel/Wert-Paar zu erstellen.

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

Das obige Beispiel kann auch so geschrieben werden:

// 存储
localStorage.sitename = "PHP中文网教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;

Entferne „sitename“ in localStorage:

localStorage.removeItem(""sitename");

Ob es sich um localStorage oder sessionStorage handelt, die APIs, die sein können Verwendet werden die gleichen, die folgenden werden häufig verwendet (nehmen Sie localStorage als Beispiel):

• Daten speichern: localStorage.setItem(key, value);

• Daten lesen: localStorage.getItem(key);

• Einzelne Daten löschen: localStorage.removeItem(key);

• Löschen alle Daten: localStorage.clear();

• Holen Sie sich den Schlüssel eines Index: localStorage.key(index);

Tipp: key /value-Paar Normalerweise als Zeichenfolge gespeichert, können Sie 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 Wert umgewandelt Typ:

Instance

if (localStorage.clickcount)
{
    localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
    localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

sessionStorage-Objekt

sessionStorage-Methode speichert Daten für eine Sitzung, wenn der Benutzer das Browserfenster schließt, werden die Daten gelöscht Zugriff auf einen Sitzungsspeicher:

Instanz

if (sessionStorage.clickcount)
{
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

Das Obige ist die Einführung in das Web in HTML5 und die Analyse verwandter Elemente

[Verwandte Empfehlungen]

Was ist eine HTML-Datei?

Was sind die Funktionen, Vor- und Nachteile von HTML5? >

Das obige ist der detaillierte Inhalt vonWas ist Web in HTML5? Was sind die Elemente im Webspeicher?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!