Detaillierte Erklärung des JS-Browserspeichers

Einführung

Während ich mich immer besser mit dem Front-End auskenne, habe ich viele Browser-Speicherlösungen kennengelernt, wie etwa Cookies, LocalStorage usw. Was sind die Gemeinsamkeiten und Unterschiede zwischen diesen Speicherlösungen und was sind ihre jeweiligen Anwendungsszenarien?

Plätzchen

Quellen von Cookies

Cookies wurden ursprünglich nicht zur lokalen Speicherung erstellt, sondern um Benutzer zu identifizieren. Wie wir alle wissen, ist das HTTP-Protokoll zustandslos, was bedeutet, dass jede Anfrage, die Sie an den Server senden, auf den Server beschränkt ist und der Server nicht weiß, von wem diese Anfragen kommen. Sie haben beispielsweise einige Artikel in den Einkaufswagen gelegt, aber beim Senden der Checkout-Anfrage war der Server verwirrt. Wie kann ich wissen, wer Sie sind und was Sie gekauft haben? Nach der Verwendung von Cookies kann der Server den sendenden Benutzer durch Überprüfen des Cookies ermitteln. Bis zu einem gewissen Grad kann man sagen, dass Cookies der Personalausweis der Anfrage sind. Dadurch kann dem Server mitgeteilt werden, von wem die Anfrage gesendet wurde.

Was sind Cookies

Sehen heißt glauben. Schauen wir uns an, wie Cookie aussieht

Dies ist das Cookie, das von der Homepage von Baidu verwendet wird. Wie Sie sehen, wird das Cookie im Browser als Name-Wert-Paar gespeichert, wobei der Wert offensichtlich verschlüsselte Daten sind.

Methode zur Cookie-Generierung

Das Cookie gehört zum Domänennamen oder zum Cookie der Baidu-Homepage. Über das Domänenattribut können wir erkennen, dass die ersten beiden Cookies zu .baidu.com gehören

Jeder Domänenname kann nur Cookies unter seinem eigenen Domänennamen setzen und darauf zugreifen. Beispielsweise kann baidu.com nicht auf Cookies mit der Domäne sougou.com zugreifen. Die Subdomäne kann jedoch die von der übergeordneten Domäne gesetzten Cookies lesen. Im Screenshot liest beispielsweise www.baidu.com das Cookie mit Domain='.baidu.com'. Durch manuelles Festlegen der Domäne können Sie das Cookie der übergeordneten Domäne festlegen. Beispielsweise kann www.baidu.com Domain='baidu.com' festlegen, sodass alle Subdomänen von *.baidu.com auch die von ihr gesetzten Cookies lesen können.

//www.baidu.com

Dokument.cookie='Alter=20;Domäne=.baidu.com'

// Zu diesem Zeitpunkt können alle Domänennamen der zweiten Ebene dieses Cookie direkt lesen

Cookies werden auf zwei Arten generiert: serverseitige Generierung und browserseitige Generierung.

Serverseitig – durch Setzen des Set-Cookies im HTTP-Antwortheader

Den zu speichernden Cookie-Wert können wir über das Set-Cookie im Antwortheader angeben. Wenn die Anforderung an den Browser zurückkehrt, setzt der Browser das Cookie entsprechend dem Set-Cookie-Wert im Header. Standardmäßig ist Domain auf den Hostnamen der Seite eingestellt, die das Cookie setzt. Natürlich können wir den Domain-Wert auch manuell festlegen.

Cookie setzen: id=a3fWa;

Im Browser-JS können Sie Cookies über document.cookie lesen und schreiben und in Form von Schlüssel-Wert-Paaren anzeigen

document.cookie="id=a3fWa"
Dokument.cookie='Alter=20;Domäne=.baidu.com'

Einsatzszenarien von Cookies

Da die Funktion von Cookies darin besteht, dem Server mitzuteilen, von wem die Anfrage stammt, besteht ihre Hauptfunktion darin, den Benutzer angemeldet zu halten (sich das Passwort zu merken). Darüber hinaus können damit auch die Browserdaten des Benutzers aufgezeichnet, Werbung geschaltet und der oben erwähnte Einkaufswagen angezeigt werden.

Nachteile von Cookies

Die Mängel sind im vorherigen Artikel tatsächlich sehr deutlich geworden.

Nicht groß genug

Cookies werden bei jeder Anfrage gesendet, was bedeutet, dass es eine strikte Größenbeschränkung für Cookies geben muss. Die Größe jedes Cookies ist auf 4 KB begrenzt. Es ist zu beachten, dass sich 4 KB auf die Größe eines Name-Value bezieht und nicht darauf, dass die Gesamtgröße der Cookies, die für diese Domäne festgelegt werden können, nur 4 KB beträgt.

Leistungsnachteile

Cookies folgen dem Domänennamen und werden bei jeder Anfrage an denselben Domänennamen gesendet. Eine große Anzahl von Anfragen, z. B. Anfragen nach statischen Ressourcen wie Bildern, erfordern jedoch überhaupt keine Cookies. Obwohl jedes Cookie nur 4 KB groß ist, führt eine kleine Menge davon zu einer enormen Ressourcenverschwendung.

Wir können statische Ressourcen auf CDN stellen. Zu diesem Zeitpunkt unterscheidet sich der Bilddomänenname vom Domänennamen der Hauptsite und es werden keine Cookies gesendet.

Nicht sicher genug

So wie wir die Cookies sehen können, wenn wir die Konsole direkt öffnen, werden die Cookies zwar durch Verschlüsselung verschlüsselt, aber während der HTTP-Übertragung im Klartext übertragen. Das Skript kann die Cookies auch leicht abrufen, was sehr leicht zu knacken ist.

Beim Setzen eines Cookies auf der Serverseite muss der Tag HttpOnly angehängt werden, damit der Browser nicht über document.cookie auf das Cookie zugreifen kann

Cookie setzen: id=a3fWa; HttpOnly

Als „Sicher“ gekennzeichnete Cookies sollten nur über verschlüsselte Anforderungen des HTTPS-Protokolls gesendet werden. Trotzdem sollten Cookies nicht zum Speichern vertraulicher Informationen verwendet werden, da Cookies von Natur aus unsicher sind und diese beiden Tags keine eindeutigen Sicherheitsgarantien bieten können.

Problemumgehung

Da Cookies so viele Mängel aufweisen, gibt es eine dauerhafte Lösung? Die lautet: „Profis machen professionelle Dinge.“

Die Aufgabe, den Benutzeranmeldestatus und einige Benutzerinformationen zu speichern, wird an Seesion übergeben. Das heißt, Cookies werden nur zum Speichern einer eindeutigen Benutzerkennung verwendet, und die tatsächlichen Informationen werden auf der Serverseite gespeichert. Cookies werden als SeesionID verwendet, um auf dem Server nach Informationen zu suchen. Auf diese Weise werden die Kapazitätsbeschränkung von Cookies und Sicherheitsprobleme gelöst, da Cookies zu diesem Zeitpunkt eine Zeichenfolge bedeutungsloser Zufallscodes enthalten.

Die Aufgabe der lokalen Speicherung wird in HTML5 an die neue lokale Speicherlösung „Web Storage“ übergeben, die in zwei Kategorien unterteilt ist: localStorage und SessionStorage. Als nächstes werde ich diese beiden Brüder vorstellen.

Lokaler Speicher

Merkmale

• Daten werden über einen längeren Zeitraum gespeichert, bis sie manuell gelöscht werden
• Größe ist etwa 5M
• Wie bei Cookies kann eine Website nur unter ihrem eigenen Domänennamen auf Daten zugreifen und diese bearbeiten.
• Wird nur auf der Clientseite verwendet und keine Kommunikation mit der Serverseite
• Bessere Schnittstellenkapselung
• Verwenden Sie Schlüssel-Wert-Paare zum Speichern von Informationen
• Das gleiche Ursprungsfenster kann zugreifen

Anwendungsbeispiele

LocalStorage ist sehr bequem zu verwenden:

//Daten festlegen localStorage.setItem("key","value");
//Daten lesen let valueLocal = localStorage.getItem("key");

Anwendungsszenarien

Anhand der oben genannten Funktionen können wir erkennen, dass LocalStorage sich sehr gut für lokales Caching eignet und die Ladegeschwindigkeit des ersten Bildschirms erhöhen kann. Einige große Ressourcen, die sich nicht häufig ändern, wie z. B. Bilder, können auch zwischengespeichert werden, um Netzwerkanforderungen zu reduzieren.

Sitzungsspeicher

Merkmale

• Die Speicherzeit gilt für diese Sitzung, d. h., sie ist weg, sobald das Fenster geschlossen wird.
• Nur dieses Fenster kann darauf zugreifen, andere Fenster mit derselben Quelle können das nicht.
• Klein, ca. 5 M

Anwendungsszenarien

sessionStorage eignet sich besser zum Speichern von Lebenszyklus- und Sitzungsebeneninformationen, die damit synchronisiert werden. Diese Informationen gelten nur für die aktuelle Sitzung. Sie können beispielsweise verwendet werden, um Formulardaten beizubehalten und zu verhindern, dass sie nach der Aktualisierung verloren gehen.

Unterschiede zwischen Cookies, LocalStorage und SessionStorage

Unterschiede im Umfang

Alle drei folgen dem Protokoll, d. h., dieselben Daten können unter demselben Protokoll, demselben Domänennamen und demselben Port abgerufen und geändert werden. Der einzige Unterschied besteht darin, dass SeesionStorage auch dasselbe Fenster benötigt.

Unterschiede im Lebenszyklus

• Die Dauer der Cookies kann manuell festgelegt werden. Die Standardeinstellung ist die Dauer der aktuellen Sitzung. Cookies werden gelöscht, wenn das Fenster geschlossen wird. Wenn eine Ablaufzeit festgelegt ist, werden sie bis zum Ablaufzeitpunkt auf der Festplatte gespeichert.
• LocalStorage ist ein dauerhafter lokaler Speicher, der immer vorhanden bleibt, sofern Sie ihn nicht manuell löschen.
• SessionStorage ist ein Speicher auf Sitzungsebene und wird ebenfalls gelöscht, wenn das Fenster geschlossen wird.

Zusammenfassen

Es gibt mehrere Browser-Speicherlösungen. Natürlich sollten wir anhand der Eigenschaften der einzelnen Lösungen entscheiden, wann wir welche Lösung verwenden. Die am besten geeignete ist die beste. Fassen Sie die wichtigsten Punkte dieses Artikels zusammen

• Die Aufgabe von Cookies ist nicht die lokale Speicherung, sondern die „Beibehaltung des Zustands“
• Web Storage ist ein von HTML5 bereitgestellter Datenspeichermechanismus speziell für die Browserspeicherung und kommuniziert nicht mit dem Server.

Oben finden Sie eine ausführliche Erläuterung der von JS-Browsern gespeicherten Details. Weitere Informationen zum JS-Browserspeicher finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!