Cookies: document.cookie
In der Webentwicklung ist das effektive Verwalten von Daten entscheidend. Eine der grundlegenden Methoden zur Datenverarbeitung auf der Client-Seite ist die Verwendung von Cookies. Cookies sind kleine Datenmengen, die im Browser des Benutzers gespeichert werden. Sie spielen eine wichtige Rolle bei der Verbesserung der Benutzererfahrung und Funktionalität, indem sie zustandsbehaftete Informationen für die Webseite speichern. In diesem Leitfaden erfahren Sie, wie Sie Cookies mit JavaScript verwalten, und erhalten praktische Codebeispiele zur Integration in Ihre Projekte.
Cookies mit JavaScript erstellen
Um ein Cookie zu erstellen, weisen Sie einfach einen String an document.cookie zu. Dieser String muss ein Schlüssel-Wert-Paar enthalten, das den Namen und den Wert des Cookies darstellt. Optional können Sie Attribute wie Ablaufdatum, Pfad, Domain und Sicherheit für das Cookie festlegen. Das Attribut domain steuert den Geltungsbereich: Standardmäßig sind Cookies auf den aktuellen Host und dessen Subdomains beschränkt. Durch die Einstellung von domain=.example.com wird das Cookie für alle Subdomains verfügbar, während domain=app.example.com es auf diese spezifische Subdomain beschränkt.
So erstellen Sie ein grundlegendes Cookie:
Diese Codezeile erstellt ein Cookie mit dem Namen username und dem Wert John Doe (kodiert, um das Leerzeichen sicher zu verarbeiten), legt das Ablaufdatum auf den 8. Juni 2025 fest und macht es für die gesamte Website verfügbar. Wenn der Wert Leerzeichen oder Sonderzeichen enthält, kodieren Sie ihn immer mit encodeURIComponent, um Parsing-Probleme zu vermeiden.
Ablaufdaten festlegen
Um sicherzustellen, dass ein Cookie für einen bestimmten Zeitraum gespeichert wird, müssen Sie ein Ablaufdatum im UTC-Zeitformat mit dem Attribut expires festlegen. Alternativ können Sie das Attribut max-age verwenden, um die Lebensdauer des Cookies in Sekunden anzugeben.
WARNING
Geben Sie immer ein Ablaufdatum für Ihre Cookies an, um sicherzustellen, dass sie nur für die beabsichtigte Dauer gespeichert werden.
Dieses Cookie userSettings läuft 24 Stunden (86.400 Sekunden) nach seiner Erstellung ab.
Cookies in JavaScript abrufen
Das Abrufen von Cookies erfolgt durch Lesen des document.cookie-Strings, wie Sie bereits im obigen Beispiel gesehen haben. Dieser String enthält alle Cookies für die aktuelle Domain, gespeichert in einer durch Semikolons getrennten Liste. Um ein bestimmtes Cookie zu finden, können Sie diesen String aufteilen und durch das resultierende Array suchen:
Cookies löschen
Um ein Cookie zu löschen, können Sie sein Ablaufdatum auf ein Datum in der Vergangenheit setzen. Dies wird effektiv erreicht, indem das Attribut expires auf ein bereits vergangenes Datum festgelegt wird. Hinweis: Sie müssen auch die exakten path- und domain-Attribute angeben, die bei der Erstellung des Cookies verwendet wurden, da der Browser das Cookie sonst nicht löscht.
Durch das Festlegen des Ablaufdatums auf den 1. Januar 1970 wird das Cookie sofort vom Browser entfernt.
Sichere Handhabung von Cookie-Attributen
Bei der Arbeit mit Cookies, die sensible Informationen enthalten, wird Sicherheit zum entscheidenden Faktor. Um die Sicherheit von Cookies zu erhöhen, können Sie die Attribute Secure und SameSite über JavaScript verwenden. Beachten Sie, dass das Attribut HttpOnly nicht clientseitig festgelegt werden kann; es muss auf dem Server konfiguriert werden.
Secure: Stellt sicher, dass das Cookie nur über HTTPS gesendet wird, um eine Offenlegung über eine HTTP-Verbindung zu verhindern.SameSite: Beschränkt, wie Cookies bei domänenübergreifenden Anfragen gesendet werden, und hilft so, CSRF-Angriffe zu verhindern.
WARNING
Wenn Ihre Website über HTTPS bereitgestellt wird, fügen Sie allen Cookies das Secure-Attribut hinzu, um die Übertragung über unsichere Verbindungen zu verhindern.
document.cookie = "sessionId=abc123; expires=Sat, 08 Jun 2025 12:00:00 UTC; path=/; Secure; SameSite=Lax";Dieses Cookie ist sicher und beschränkt domänenübergreifende Anfragen. (Der HttpOnly-Schutz muss serverseitig behandelt werden.)
Fazit
Cookies sind ein leistungsstarkes Werkzeug zum Verwalten benutzerspezifischer Daten und Einstellungen in Webanwendungen. Durch das Verständnis, wie man Cookies mit JavaScript erstellt, abruft und sicher verwaltet, können Entwickler die Benutzererfahrung auf ihren Websites erheblich verbessern. Denken Sie stets daran, mit Cookies sorgfältig umzugehen, insbesondere beim Umgang mit persönlichen oder sensiblen Daten.
Praxis
Welche Attribute können Sie verwenden, um die Sicherheit von Cookies in JavaScript zu erhöhen?