Wie setzt man Cookies im Browser?

Es gibt mehrere Möglichkeiten, Cookies im Browser zu setzen.

1. Über den HTTP-Header Set-Cookie vom Server. Dies ist die Hauptmethode zum Setzen von Cookies, die auf Serverseite erfolgt. Der Server sendet dem Browser den Header Set-Cookie, der den Browser anweist, ein bestimmtes Schlüssel-Wert-Paar zu speichern.

   Beispiel einer HTTP-Antwort vom Server:

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: username=johndoe; Expires=Thu, 21 Dec 2023 12:00:00 GMT; Path=/; Secure; HttpOnly
   Set-Cookie: settings=theme=dark&lang=en; Path=/
   

   Parameter des Headers Set-Cookie:

   • name=value: Name und Wert des Cookies. Obligatorischer Parameter.
   • Expires=<date>: Datum und Uhrzeit, wann das Cookie abläuft. Wenn nicht angegeben, ist das Cookie eine Sitzungscookie und wird beim Schließen des Browsers gelöscht. Datumsformat - RFC 1123.
   • Max-Age=<seconds>: Maximale Lebensdauer des Cookies in Sekunden. Hat Vorrang vor Expires.
   • Domain=<domain>: Domain, für die das Cookie verfügbar ist. Standardmäßig die aktuelle Domain (aber keine Subdomains).
   • Path=<path>: Pfad auf dem Server, für den das Cookie verfügbar ist. Standardmäßig der Wurzelpfad /.
   • Secure: Kennzeichen, dass das Cookie nur über HTTPS gesendet werden soll.
   • HttpOnly: Kennzeichen, dass das Cookie nicht über JavaScript zugänglich ist via document.cookie. Schützt vor XSS-Angriffen.
   • SameSite=<mode>: Steuert das Senden des Cookies bei Cross-Site-Anfragen. Mögliche Werte: Strict, Lax (Standard), None.

2. Über JavaScript auf der Client-Seite. Mit dem Objekt document.cookie kann man Cookies lesen, schreiben und löschen.

   Cookie setzen:

   // Einfaches Cookie setzen
   document.cookie = "username=johndoe";
   
   // Cookie mit expires, path, secure und SameSite=Lax setzen
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 Tage
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Cookies lesen:

   // document.cookie gibt eine Zeichenkette aller verfügbaren Cookies im Format "key1=value1; key2=value2; ..."
   console.log(document.cookie);
   

   Cookie löschen: Um ein Cookie zu löschen, setzt man es mit einem Ablaufdatum in der Vergangenheit.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // Ablaufdatum in der Vergangenheit setzen
   

   Es ist wichtig, bei der Löschung die gleichen path- und domain-Parameter anzugeben (falls gesetzt), die bei der Erstellung verwendet wurden. SameSite muss ebenfalls übereinstimmen, um eine korrekte Löschung zu gewährleisten.

3. Mit Drittanbieter-JavaScript-Bibliotheken. Es gibt Bibliotheken, die die Arbeit mit Cookies vereinfachen (z.B. js-cookie). Sie bieten eine bequemere API zum Setzen, Lesen und Löschen von Cookies.

   Beispiel mit js-cookie:

   // Bibliothek einbinden
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Cookie setzen
   Cookies.set('username', 'johndoe');
   
   // Cookie mit Optionen setzen
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires in Tagen
   
   // Cookies lesen
   const username = Cookies.get('username'); // Gibt 'johndoe' oder undefined zurück
   const allCookies = Cookies.get(); // Gibt ein Objekt mit allen Cookies zurück
   
   // Cookies löschen
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Pfad angeben, falls beim Setzen verwendet