# Daten Speicherung: Cookies, Session Storage und Local Storage Diese Notizen behandeln drei wichtige Mechanismen zur Datenspeicherung auf der Client-Seite: Cookies, Session Storage und Local Storage. Wir werden ihre Eigenschaften, Anwendungsfälle und die JavaScript-Interaktion detailliert untersuchen. ## 1. Cookies **Was sind Cookies?** Cookies sind kleine Textdateien, die vom Webserver an den Browser des Clients gesendet werden und dort gespeichert werden. Sie werden mit jeder HTTP-Anfrage an den Server mitgeschickt, solange sie gültig sind. Denken Sie an Cookies als kleine Notizzettel, die der Server dem Browser gibt, um sich an Informationen zu erinnern. **Aufbau eines Cookies:** Ein Cookie besteht aus einem Namen, einem Wert und Metadaten: ` = ; ` Die Metadaten sind Key-Value-Paare, getrennt durch Semikolons (;). Wichtige Metadaten sind: * **`expires`:** Gibt den Ablaufzeitpunkt des Cookies an. Ohne `expires` wird das Cookie beim Schließen des Tabs/Browsers gelöscht (Session-Cookie). * **`path`:** Gibt den Ablageort im Browser an (Standard: aktueller Pfad der JS-Datei). Beispiel: `userKey=123456; expires=Thu, 18 Dec 2011 12:00:00 UTC; path=/` **Eigenschaften von Cookies:** * **Größe:** Maximal ca. 4 kB pro Cookie. * **Anzahl:** Maximal ca. 50 Cookies pro Domain. * **Lebensdauer:** Wird durch das `expires`-Attribut festgelegt. **Typische Anwendungen:** * **Sitzungsmanagement:** Speichern von Sitzungsdaten, z.B. Benutzeranmeldungen (Session-Cookies). * **Benutzererkennung:** Nachverfolgen des Benutzerverhaltens über verschiedene Besuche hinweg (Tracking-Cookies). * **Personalisierung:** Speichern von Benutzereinstellungen und Präferenzen. Vergessen Sie nicht, dass die Metadaten *nicht* an den Server übertragen werden, nur der Name und der Wert. **JavaScript-Zugriff:** * **Erstellen:** `document.cookie = "username=John Doe";` * **Lesen:** `const webCookies = document.cookie;` (gibt alle Cookies als einen String zurück) * **Schreiben/Aktualisieren:** `document.cookie = "username=Hans Muster";` * **Löschen:** `document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";` ## 2. Session Storage **Was ist Session Storage?** Session Storage ist ein Mechanismus zur Speicherung von Daten auf der Client-Seite, der nur für die Dauer der aktuellen Browsersitzung gültig ist. Die Daten gehen verloren, sobald der Tab oder der Browser geschlossen wird. Session Storage ist ideal für temporäre Daten, die nur während einer Sitzung benötigt werden. **Eigenschaften von Session Storage:** * **Größe:** Bis zu 5-10 MB, abhängig vom Browser. * **Lebensdauer:** Daten werden nur für die Dauer der aktuellen Browsersitzung gespeichert. **Typische Anwendungen:** * **Sitzungsspezifische Daten:** Speicherung von Daten, die nur während einer Sitzung benötigt werden (z.B. ausgefüllte Formulare, Warenkorb-Daten). * **Einmalige Interaktionen:** Temporäre Speicherung von Benutzereingaben während der Navigation auf einer Seite. **JavaScript-Zugriff:** * **Daten speichern:** `sessionStorage.setItem("highscore", "1234");` * **Daten lesen:** `const data = sessionStorage.getItem("highscore");` * **Daten schreiben/überschreiben:** `sessionStorage.setItem("highscore", "2345");` * **Daten löschen:** `sessionStorage.removeItem("highscore");` ## 3. Local Storage **Was ist Local Storage?** Local Storage ist ein Mechanismus zur dauerhaften Speicherung von Daten auf der Client-Seite. Die Daten bleiben erhalten, bis sie explizit gelöscht werden, auch nach dem Schließen des Browsers oder dem Herunterfahren des Computers. Local Storage eignet sich hervorragend für persistente Daten, wie Benutzereinstellungen oder Offline-Anwendungsdaten. **Eigenschaften von Local Storage:** * **Größe:** Bis zu 5-10 MB, abhängig vom Browser. * **Lebensdauer:** Daten bleiben bestehen, bis sie explizit gelöscht werden. **Typische Anwendungen:** * **Langfristige Speicherung:** Daten, die über verschiedene Sitzungen hinweg benötigt werden (z.B. Benutzereinstellungen, Themes). * **Offline-Anwendungen:** Speichern von Daten für Offline-Anwendungen. **JavaScript-Zugriff:** * **Daten speichern:** `localStorage.setItem("theme", "dark");` * **Daten lesen:** `const data = localStorage.getItem("theme");` * **Daten schreiben/überschreiben:** `localStorage.setItem("theme", "light");` * **Daten löschen:** `localStorage.removeItem("theme");` ## 4. Vergleich: Cookies, Session Storage, Local Storage | Feature | Cookie | Session Storage | Local Storage | |-----------------|-----------------------------|-----------------------------|-----------------------------| | Speicherkapazität | ca. 4 kB pro Cookie | 5-10 MB | 5-10 MB | | Lebensdauer | Abhängig von `expires` | Bis zum Schließen des Browsers | Bis zur expliziten Löschung | | Übertragung | Gesendet mit jeder HTTP-Anfrage | Keine | Keine | | Typische Verwendung | Sitzungsmanagement, Tracking, Personalisierung | Sitzungsspezifische Daten | Langfristige Speicherung, Offline-Daten | ## 5. Aufgabe: Reaktionszeit-Messung Eine Erweiterung des "Reaction Timer"-Programms soll die schnellste gemessene Reaktionszeit speichern und anzeigen. Welche Methode (Cookie, Session Storage oder Local Storage) ist am besten geeignet und warum? Betrachten Sie die Lebensdauer der Daten und die benötigte Speicherkapazität, um die beste Methode auszuwählen. Für die schnellste Reaktionszeit eines Benutzers über mehrere Sitzungen hinweg ist Local Storage die beste Wahl.