5.1 Grundlegende Eigenschaften von Cookies
Cookies sind kleine Datenfragmente, die Websites auf der Clientseite (im Browser des Nutzers) speichern können. Sie existierten schon 20 Jahre vor localStorage und haben all die Zeit geholfen, deren Funktionen zu erfüllen. Auch heute werden sie oft verwendet, um Sitzungsstatus, Benutzereinstellungen, Tracking und andere Aufgaben zu speichern.
Grundlegende Eigenschaften von Cookies:
- Name und Wert (name=value): Schlüssel-Wert-Paar, das Daten speichert.
- Domain und Pfad (domain, path): Bestimmen, auf welche URLs und Domains die Cookies anwendbar sind.
- Ablaufzeit (expires, max-age): Bestimmt, wann das Cookie abläuft und gelöscht wird.
- Sicherheit (secure, HttpOnly): Gibt an, wie und wann das Cookie übertragen werden kann.
Setzen von Cookies
Cookies können mit JavaScript oder serverseitigem Code gesetzt werden. In JavaScript wird dafür die Eigenschaft document.cookie verwendet.
Beispiel zum Setzen von Cookies mit JavaScript:
document.cookie = "username=JohnDoe";
Zusätzliche Cookie-Parameter:
- expires: Gibt das Ablaufdatum des Cookies an. Nach diesem Datum wird das Cookie gelöscht.
- path: Bestimmt den Pfad, für den das Cookie gültig ist. Normalerweise wird / verwendet, um das Cookie für die gesamte Website zugänglich zu machen.
- domain: Bestimmt die Domain, für die das Cookie gültig ist.
- secure: Wenn gesetzt, wird das Cookie nur über HTTPS übertragen.
- HttpOnly: Wenn gesetzt, kann das Cookie nicht über JavaScript erreicht werden (nur serverseitig).
Beispiel zum Setzen von Cookies mit zusätzlichen Parametern:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Verwaltung von Cookies
1. Lesen von Cookies
Alle Cookies für das aktuelle Dokument werden in einer langen Zeichenkette in document.cookie gespeichert. Um den Wert eines Cookies zu erhalten, muss diese Zeichenkette geparst werden.
Beispiel zum Lesen von Cookies:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Lesen des Cookie-Werts "username"
const username = getCookie('username');
console.log(username); // Zeigt: JohnDoe
2. Aktualisieren von Cookies
Um den Wert eines Cookies zu aktualisieren, genügt es, es erneut mit demselben Namen, aber einem neuen Wert und neuen Parametern zu setzen.
Beispiel zum Aktualisieren von Cookies:
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Löschen von Cookies
Um ein Cookie zu löschen, muss ein abgelaufenes Ablaufdatum dafür gesetzt werden.
Beispiel zum Löschen von Cookies:
// Setzen eines abgelaufenen Ablaufdatums
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Beispiele für die Arbeit mit Cookies
Erklärung:
setCookie: Setzt ein Cookie mit dem angegebenen Namen, Wert und Ablaufzeit (in Tagen)getCookie: Gibt den Wert eines Cookies mit dem angegebenen Namen zurückdeleteCookie: Löscht ein Cookie mit dem angegebenen Namen
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Cookie-Beispiel</title>
</head>
<body>
<button onclick="handleSetCookie()">Setze Cookie</button>
<button onclick="handleGetCookie()">Lese Cookie</button>
<button onclick="handleDeleteCookie()">Lösche Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Cookie "username" wurde für 7 Tage auf "JohnDoe" gesetzt');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" hat den Wert: ' + cookieValue);
} else {
alert('Cookie "username" wurde nicht gefunden');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" wurde gelöscht');
}
</script>
</body>
</html>
5.4 Setzen von Cookies auf der Serverseite
Betrachten wir die Arbeit mit HttpOnly und Secure Cookies auf dem Server (Node.js).
Beispiel:
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 Tage
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Sicheres Server-Cookie gesetzt');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Cookie-Wert: ${cookie}`);
});
app.listen(3000, () => {
console.log('Server läuft auf Port 3000');
});
Beispiele für die Verwendung von Cookies:
- Authentifizierung: Cookies werden häufig verwendet, um Sitzungstoken zu speichern, die den Benutzer zwischen Anfragen authentifizieren.
- Benutzereinstellungen: Cookies können Benutzereinstellungen wie Sprache oder Themen speichern.
- User-Tracking: Cookies können verwendet werden, um das Verhalten der Benutzer auf der Website für Analysezwecke und Personalisierung von Inhalten zu verfolgen.
GO TO FULL VERSION