Heim > Web-Frontend > H5-Tutorial > Hauptteil

Was sind die HTML5-Offline-Speicher?

青灯夜游
Freigeben: 2021-12-01 14:29:46
Original
5872 Leute haben es durchsucht

Es gibt zwei Arten von HTML5-Offline-Speicher: 1. Lokaler Speicher (lokaler Speicher), der normalerweise zum Zwischenspeichern statischer Ressourcen (statische Seiten) verwendet wird. 2. Anwendungscache (Anwendungscache), der normalerweise zum Zwischenspeichern von AJAX-Anforderungen verwendet wird. kritische AJAX-Daten.

Was sind die HTML5-Offline-Speicher?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Offline-Speichertechnologie

HTML5 schlägt zwei wichtige Offline-Speichertechnologien vor: Localstorage und Application Cache, die beide ihre eigenen Anwendungsszenarien haben; die traditionelle Offline-Speichertechnologie ist Cookie.

(1) Anwendungscache: Wird normalerweise zum Zwischenspeichern statischer Ressourcen (statische Seiten) verwendet.

(2) LocalStorage (lokaler Speicher): Wird normalerweise für das Caching von AJAX-Anfragen verwendet, um nicht kritische AJAX-Daten zu speichern.

Und Cookies können nur einen kleinen Textabschnitt (4096 Byte) speichern. Dies ist einer der Unterschiede zwischen Cookies und der oben genannten Caching-Technologie. Da HTTP zustandslos ist, muss der Server unterscheiden Die Anfrage kommt vom selben Server und diese Aufgabe wird durch Cookies erledigt. Dieser Text wird jedes Mal zwischen dem Server und dem Browser weitergegeben, um die Berechtigungen des Benutzers zu überprüfen.

Daher sind die Anwendungsszenarien von Application Cache unterschiedlich, sodass auch die Verwendung inkonsistent ist.

Was ist Anwendungs-Cache? HTML5 führt die Anwendungs-Caching-Technologie ein, was bedeutet, dass Webanwendungen zwischengespeichert und ohne Netzwerk verwendet werden können. Durch die Erstellung einer Cache-Manifestdatei können Offline-Anwendungen einfach erstellt werden.

Application Cache bietet drei Vorteile:

① Offline-Browsing

② Verbessern Sie die Seitenladegeschwindigkeit

③ Reduzieren Sie den Serverdruck

Und alle gängigen Browser unterstützen Application Cache, auch wenn es nicht unterstützt wird, ist es nicht falsch. Was Welche Auswirkungen hat das Programm?

Welche Anwendung bietet der Offline-Speicher von Application Cache?

Wenn Sie im Flugzeug sitzen, das Mobiltelefonsignal schwach ist oder während einer Vorlesung möglicherweise kein Netzwerk vorhanden ist, können Sie dabei den Offline-Speicher verwenden Zeit

Erkennen Sie, ob das Netzwerk online ist

Da wir es jetzt wissen, wird der Anwendungscache verwendet, um auf dem Client zwischengespeicherte Dateien zu lesen, wenn das Netzwerk offline ist.

Erkennen Sie das Netzwerk-OnLine-Attribut wie folgt:

if (navigator.onLine == true){
    alert("正常上网")
}
else{
    alert("无法连接网络") 
}
  
Nach dem Login kopieren

So verwenden Sie den Offline-Speicher

Browserseitig

Nur eine einfache Einstellung ist im Browser erforderlich. Fügen Sie das Manifest-Attribut in das -Tag ein

Datei Die empfohlene Erweiterung ist: .appcache. Wenn Sie zum ersten Mal auf die zwischengespeicherten lokalen Dateien der Webseite zugreifen und beim nächsten Mal kein Netzwerk vorhanden ist, gelangen Sie nicht zum Server. Nehmen Sie einfach diese Dateiliste

Serverseite

Fügen Sie den korrekt konfigurierten MIME-Typ auf dem Server hinzu. das heißt „text/cache-manifest“. Muss auf dem Webserver konfiguriert werden.

Es wird derzeit nicht häufig verwendet, da die meisten Websites über interaktive Funktionen verfügen. Ohne interaktive Funktionen wird die Website zu einer reinen Anzeige und hat wenig Bedeutung.

Detaillierte Erklärung zur Verwendung der .appcache-Dateiliste auf der Browserseite

<html manifest="demo.appcache">
Nach dem Login kopieren
Demonstrationsbild ohne Netzwerk:

Empfohlenes Tutorial: „HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die HTML5-Offline-Speicher?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage