Da HTTP zustandslos ist, wer sind Sie? Was hast du gemacht? Tut mir leid, der Server weiß es nicht.
So entsteht die Sitzung, die Benutzerinformationen für die zukünftige Verwendung auf dem Server speichert (z. B. Benutzername, Einkäufe im Warenkorb usw.).
Die Sitzung ist jedoch temporär und wird gelöscht, wenn der Benutzer die Website verlässt. Wenn Sie Informationen dauerhaft speichern möchten, können Sie diese in einer Datenbank speichern!
So funktioniert eine Sitzung: Erstellen Sie für jeden Benutzer eine Sitzungs-ID (Kern!!!). Die Sitzungs-ID wird im Cookie gespeichert, was bedeutet, dass die Sitzung ungültig wird, wenn der Browser Cookies deaktiviert! (Dies kann jedoch auch auf andere Weise erreicht werden, z. B. durch Weitergabe der Sitzungs-ID über die URL.)
Die Benutzerauthentifizierung verwendet im Allgemeinen eine Sitzung.
Cookies:Zweck: Lokal auf Client-Seite gespeicherte Daten (in der Regel verschlüsselt), damit eine Website einen Benutzer identifizieren kann.
Das Cookie wird (auch wenn es nicht benötigt wird) in der HTTP-Anfrage vom selben Ursprung mitgeführt, d. h. zwischen dem Client und dem Server hin- und hergereicht!
Die Datengröße des Cookies überschreitet nicht 4 KB
Cookie-Gültigkeitsdauer: Die eingestellte Cookie-Gültigkeitsdauer ist bis zum Ablaufdatum gültig, auch wenn der Browser geschlossen wird!
localStorage & sessionStorage:Früher wurden Cookies häufig für das lokale Caching verwendet, aber die Webspeicherung muss sicherer und schneller werden!
Diese Daten werden nicht auf dem Server (auf dem Client gespeichert) gespeichert und haben keinen Einfluss auf die Serverleistung!
Für die Datenspeicherung sessionStorage und localStorage gelten ebenfalls Größenbeschränkungen, diese sind jedoch viel größer als Cookies und können 5 MB oder sogar mehr erreichen!
localStorage: Datenspeicherung ohne zeitliche Begrenzung!
sessionStorage: Wie aus der englischen Bedeutung hervorgeht, handelt es sich um die Datenspeicherung der Sitzung, d. h. nachdem der Benutzer den Browser (Tab/Fenster) schließt, werden die Daten gelöscht!
Unterstützung für HTML5-Webspeicher:IE8 oder höher, moderner Browser.
Daten werden in Schlüssel-Wert-Paaren gespeichert:
Sowohl localStorage als auch sessionStorage verfügen über die folgenden Methoden:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Web Storage</title></head><body> <div id=test></div> <script> if (typeof (Storage) != undefiniert) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = Sie sind: + localStorage.name; zuerst: + localStorage.name1 + , + localStorage.key(0)); console.log(second: + localStorage.name1); console.log(third: + localStorage.clear(); console.log(last: + localStorage.name); document.getElementById('test').innerHTML = Aktualisieren Sie Ihren Browser! Derzeit unterstützt der Browser keine Speicherung; } </script></body></html>Ergebnisse der Programmausführung:
Hinweis: Schlüssel-Wert-Paare werden als Zeichenfolgen gespeichert und der Typ sollte entsprechend den Anforderungen geändert werden (z. B. zum Hinzufügen in den Zahlentyp ändern).
HTML5-Anwendungscache:Durch das Erstellen einer Cache-Manifestdatei können Webanwendungen zwischengespeichert und ohne Netzwerkverbindung aufgerufen werden!
Vorteile des Anwendungscaches:1. Offline-Browsing;
2. Höhere Geschwindigkeit: Zwischengespeicherte Ressourcen werden schneller geladen;
3. Reduzieren Sie die Browserlast: Der Client lädt nur geänderte Ressourcen vom Server herunter oder aktualisiert sie
Supportstatus:
IE10 oder höher, moderner Browser.
verwenden:
<!DOCTYPE html><html manifest=demo.appcache></html>
Hinweis: Um den Anwendungscache zu aktivieren, müssen Sie das Manifest-Attribut angeben (Erweiterung: .appcache). Wenn das Manifest-Attribut nicht angegeben ist, wird die Seite nicht zwischengespeichert (es sei denn, die Seite ist direkt in der Manifestdatei angegeben!)
Die Manifestdatei muss korrekt mit MIME-Typ: text/cache-manifest auf dem Server konfiguriert sein.
Manifestdatei:Das Manifest ist eine einfache Textdatei, die dem Browser mitteilt, was zwischengespeichert wird und was nicht!
Das Manifest kann in drei Teile unterteilt werden:CACHE MANIFEST: Die hier aufgeführten Dateien werden nach dem ersten Download zwischengespeichert!
NETZWERK: Die in diesem Punkt aufgeführten Dateien erfordern eine Netzwerkverbindung mit dem Server und werden nicht zwischengespeichert!
FALLBACK: Dieses Element listet die Fallback-Seite auf, wenn auf die Seite nicht zugegriffen werden kann (z. B. 404-Seite)!
test.appcache:
CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/Wenn auf die Dateien im Verzeichnis nicht zugegriffen werden kann, verwenden Sie stattdessen /offline.html /html/ / offline.htmlAnwendungscache aktualisieren:
1. Der Benutzer löscht den Browser-Cache!
2. Die Manifestdatei wird geändert (#: weist auf einen Kommentar hin, und wenn sie in #2018 1 1 v20.0.0 geändert wird, wird der Browser erneut zwischengespeichert!)
3. Das Programm aktualisiert den Anwendungscache!
Webarbeiter:Bei Web Workern handelt es sich um Javascript, das unabhängig von anderen Skripten im Hintergrund ausgeführt wird und die Seitenleistung nicht beeinträchtigt!
Wenn Sie ein Skript auf einer allgemeinen HTML-Seite ausführen, reagiert die Seite erst, wenn das Skript geladen ist!
Unterstützung: IE10 oder höher, moderne Browser
Beispiel: HTML-Datei:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>web worker</title></head><body> <p>Count: <output id=count></output></p> <button onclick=startWorker()>Start</button> <button onclick=overWorker()>End</button> <script> var w function startWorker(){ // Überprüfen Sie, ob der Browser Web Worker unterstützt if(typeof(Worker) !=='undefiniert'){ if(typeof(w)=='undefiniert'){ //Web-Worker-Objekt erstellen w=new Worker('testWorker.js'); Das Ereignis wird weiterhin abgehört (auch wenn das externe Skript abgeschlossen ist), sofern es nicht beendet wird. w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data }; ('count' ).innerHTML='Der Browser unterstützt keine Web-Worker'; } } function overWorker() { // Web beenden Worker-Objekt, gibt Browser-/Computerressourcen frei w.terminate(); w=undefiniert; } </script></body></html>testWorker.js-Datei:
var i=0;function timedCount() { i+=1; //Der wichtige Teil, eine Information an die HTML-Seite zurückgeben postMessage(i);}timedCount();Hinweis 1: Normalerweise werden Web-Worker nicht für so einfache Aufgaben eingesetzt, sondern für Aufgaben, die mehr CPU-Ressourcen verbrauchen!
Hinweis 2: Die Ausführung in Chrome führt zu dem Fehler „Zugriff über Ursprung ‚null‘ nicht möglich“. Meine Lösung lautet: Öffnen Sie Apache in xampp und verwenden Sie http://localhost/ für den Zugriff.
Nachteile von Web-Workern:Da sich der Web Worker in einer externen Datei befindet, kann er nicht auf die folgenden Javascript-Objekte zugreifen:
Das vom Server gesendete Ereignis ist eine unidirektionale Informationsübertragung; die Webseite kann automatisch Aktualisierungen vom Server erhalten!
Bisher: Die Webseite fragte zunächst nach verfügbaren Updates, der Server sendete die Daten und die Updates wurden durchgeführt (bidirektionale Datenübertragung)!
Support-Status: Alle modernen Browser außer IE unterstützen es!
Beispielcode: HTML-Datei:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Gesendetes Ereignis trennen</title></head><body> <p>Gesendete Ereignisinformationen trennen</p> <div id=test></div> <script> // Bestimmen Sie, ob der Browser EventSource unterstützt if(typeof(EventSource)!==undefined){ // Erstellen Sie ein EventSource-Objekt var source=new EventSource(test.php); Event Listen source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br> }; document.getElementById('test').innerHTML=Leider unterstützt der Browser kein vom Server gesendetes Ereignis; } </script></body></html>test.php:
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:Die Serverzeit ist: {$ Zeit} /n/n;// Ausgabedaten aktualisieren Flush();Hinweis: Es gibt keinen Inhalt dahinter, die PHP-Datei kann weggelassen werden?> Schließen!
HTML5-WebSocket:WebSocket kann für die Kommunikation zwischen mehreren Tabs verwendet werden!
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.