HTML5 Web Storage vs Cookies

HTML5 Web Storage vs Cookies

Posted by ariesprodesign in Allgemein, HTML5, JavaScript, Programmierung, Technik, Webdesign 10 Mai 2014

Cookies

Ein Cookie ist eine der Wege, Informationen auf der Client-Seite zu speichern. Es ist auch der einzige Weg vor HTML5 gewesen. Cookies können nicht mehr als 4 KB Information speichern (100KB pro Domain). Sehr wenig. Aber zur gleichen Zeit wird der Inhalt des Cookies zu jeder HTTP-Anforderung an den Server übermittelt. Das bedeutet, dass jedes Mal, wenn der Client eine Anfrage an den Server stellt, die KB alle Cookies, die zum Domain gehören, dazu gerechnet werden müssen.

So wird ein Cookie in JavaScript gesetzt:

Will man dieses Cookie dauerhafter speichern, muss man die Verfallsdatum in der Zukunft versetzen und ihm eine bestimmte Lebensdauer geben, also das fortlaufend auf x Tage in der Zukunft setzen.

Will man den entfernen (was in Wirklichkeit nur passiert wenn der Browser geschlossen wird) muss sein Wert auf Leer gesetzt werden und die Verfallsdatum an die Sitzung binden.

Cookies stinken.

Web Storage

Web Storage löst dieses Problem. Die Information wird in eine Variable auf den Rechner gespeichert. Sie können beliebigem Werte (Objekt, Array, String, Zahl etc.) in ein Web Storage speichern, aber Achtung, der Browser gibt die Werte als String zurück, man kann dieses Problem mit der Hilfe von JSON umgehen (siehe Beispiel unten). Web Storage hat ein Limit von 5 MB und wird in allen gängigen Browser (einschließlich IE8) unterstützt.

JSON Beispiel:

Es gibt zwei verschiedene Arten von Web Storage, ein Mal ‚sessionStorage‘ und ein Mal ‚localStorage‘. Wenn man Daten in sessionStorage erstellt, stehen diese nur diesem Fenster zur Verfügung, bis die Sitzung beendet wurde. Ein anderes Fenster für die gleiche Domäne hat auf diese Sitzungsdaten keinen Zugriff. Das ist zum Beispiel für Web Shops interessant, damit kann man doppelte Transaktionen verhindern.

localeStorage dagegen basiert auf der Domäne und umspannt alle Fenster, die für diese Dömane geöffnet sind. Wenn man allerdings 2 Fenster öffnet und in beiden Fenstern denselben Key speichert, überschreibt man den jeweils anderen Wert. Die bleiben auch verfügbar, bis sie entweder vom Webprogrammierer oder von Nutzer explizit gelöscht werden. Hier ist gelöscht wirklich gelöscht.

So entfern man ein Wert:

So entfern man alle Werte:

Web Storage werden nicht wie Cookies unverschlüsselt auf den Server übertragen, sondern auf dem System des Nutzers gespeichert.

Schreiben Sie einen Kommentar