Heim > Artikel > Web-Frontend > Ausführliche Erklärung zum HTML5-Webspeicher

Ausführliche Erklärung zum HTML5-Webspeicher

巴扎黑Original: 2017-05-21 14:54:181388Durchsuche

Der folgende Editor bietet Ihnen eine detaillierte Erklärung des HTML5-Webspeichers. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Kommen Sie und schauen Sie sich den Editor an, ich wünsche Ihnen allen viel Spaß beim Spielen

Speichern von Daten auf dem Client

HTML5 bietet zwei Arten von Daten auf dem Client Neue Möglichkeiten, Daten auf der Client-Seite zu speichern:

• localStorage - keine zeitliche Begrenzung Datenspeicherung

• sessionStorage – Vor der Datenspeicherung für eine Sitzung

wurden diese alle durch Cookies durchgeführt. Cookies eignen sich jedoch nicht zum Speichern großer Datenmengen, da sie bei jeder Anfrage an den Server weitergeleitet werden, was Cookies langsam und ineffizient macht.

In HTML5 werden Daten nicht bei jeder Serveranfrage übergeben, sondern Daten werden nur verwendet, wenn sie angefordert werden. Es ermöglicht die Speicherung großer Datenmengen, ohne die Leistung der Website zu beeinträchtigen.

Für verschiedene Websites werden Daten in unterschiedlichen Bereichen gespeichert und eine Website kann nur auf ihre eigenen Daten zugreifen.

HTML5 verwendet JavaScript zum Speichern und Zugreifen auf Daten.

localStorage-Methode

Die von der localStorage-Methode 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.

So erstellen Sie localStorage und greifen darauf zu:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
localStorage.lastname="Smith";   
document.write("Last name: " + localStorage.lastname);   
</script>
</body>
</html>

Das folgende Beispiel zählt, wie oft ein Benutzer eine Seite besucht:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)   
    {   
    localStorage.pagecount=Number(localStorage.pagecount) +1;   
    }   
else   
    {   
    localStorage.pagecount=1;   
    }   
document.write("Visits: " + localStorage.pagecount + " time(s).");   
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
</body>
</html>

SessionStorage-Methode

sessionStorage Die Methode speichert Daten für eine Sitzung. Die Daten werden gelöscht, wenn der Nutzer das Browserfenster schließt.

So erstellen Sie einen Sitzungsspeicher und greifen darauf zu:

JavaScript-CodeInhalt in die Zwischenablage kopieren

<!DOCTYPE HTML>   
<html>   
<body>   
<script type="text/javascript">   
sessionStorage.lastname="Smith";   
document.write(sessionStorage.lastname);   
</script>   
</body>   
</html>

Das folgende Beispiel zählt, wie oft ein Benutzer eine Seite in der aktuellen Sitzung besucht:

XML/HTML-Code Inhalt in die Zwischenablage kopieren

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount)   
    {   
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;   
    }   
else   
    {   
    sessionStorage.pagecount=1;   
    }   
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");   
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum HTML5-Webspeicher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Lösung für das Problem, dass langes Drücken auf mobilen Seiten dazu führt, dass das Einfügen und Kopieren deaktiviert wirdNächster Artikel：HTML5-Lösung für das Problem, dass langes Drücken auf mobilen Seiten dazu führt, dass das Einfügen und Kopieren deaktiviert wird

In Verbindung stehende Artikel

Mehr sehen