Heim Web-Frontend H5-Tutorial Ausführliche Erklärung zum HTML5-Webspeicher

Ausführliche Erklärung zum HTML5-Webspeicher

May 21, 2017 pm 02:54 PM
html5 web

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

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

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

XML/HTML-CodeInhalt in die Zwischenablage kopieren

  1. <!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>
    Nach dem Login kopieren

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

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

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


XML/HTML-Code Inhalt in die Zwischenablage kopieren

  1. <!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>
    Nach dem Login kopieren

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!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles