Cookies
Ein Cookie ist ein kurzer Text, den der Browser bei passenden Anfragen an eine Website mitschicken kann. Die Seite schreibt theme=dark und zeigt theme / dark. Passwort oder Zugriffstoken gehören nie in ein für JavaScript lesbares Cookie.
Kein Web Storage
Vorher stand saved / lida / tea in localStorage. Ein Cookie ist anders: Es kann zu Anfragen für seine passende Website und seinen Pfad gehen, aber nicht zu jeder Website. document.cookie ist eine Semikolon-Zeichenkette, kein Objekt.
Eine kleine Einstellung
theme=dark enthält Namen und Wert. Mit Path=/ gilt die Einstellung auf den Pfaden dieser Website. SameSite=Lax begrenzt übliche websiteübergreifende Fälle; Secure sendet nur über HTTPS.
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
console.log(document.cookie);
Im Protokoll können mehrere für diese Seite sichtbare Paare stehen. Daher wird nicht die ganze Zeichenkette mit einem einzelnen Paar verglichen.
Einen Namen herauslesen
Teile bei ; und suche nach dem Namen plus =. Der Browser baut kein Objekt daraus. Hinter dem Gleichheitszeichen wird mit decodeURIComponent zurückübersetzt.
function readCookie(name) {
const start = name + "=";
const pair = document.cookie
.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
console.log(readCookie("theme"));
console.log(readCookie("drink"));
Die Ausgaben sind dark und danach null. drink wurde nie geschrieben; der fehlende Name löst keinen Fehler aus. Wie beim früheren Storage-Schlüssel kommt null zurück.
Einen Wert kodieren
; und = haben in einem Cookie eigene Syntax. Deshalb wird tea / regular vor dem Schreiben mit encodeURIComponent kodiert und beim Lesen wieder dekodiert.
Das Beispiel liefert tea / regular. Ein rohes Semikolon wäre kein normaler Wert mehr, sondern der Beginn eines weiteren Cookie-Teils.
📊 Cookie and localStorage
| Bedarf | Cookie | localStorage |
|---|---|---|
| Bei passenden Anfragen | oft ja | nein |
| Für Seiten-JavaScript lesbar | außer HttpOnly | ja |
| Kleine Präferenz | möglich | meist einfacher |
| Sensible Sitzungs-ID | Server: HttpOnly + Secure | nicht hier speichern |
Cookie oder localStorage?
Entscheidend ist, wer den Wert braucht. Keines von beiden schützt ein Geheimnis vor JavaScript, das bereits auf der Seite läuft.
JavaScript kann HttpOnly weder setzen noch lesen. Der Server schickt es im Header Set-Cookie. Hier geht es nur um eine harmlose Design-Einstellung, nicht um Anmeldung.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
function readCookie(name) {
const start = name + "=";
const pair = document.cookie.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
document.querySelector("#line").textContent =
"theme / " + readCookie("theme");
</script>
</body>
</html>
Die sichtbare Zeile
Die Seite speichert dark, liest nur theme und verbindet den Namen mit dem Ergebnis.
Die Zeile lautet theme / dark. Bei gewöhnlichem HTTP kann ein Browser das Secure-Cookie ablehnen; die echte Website verwendet HTTPS. saved / lida / tea gehörte zur Storage-Seite.
Üben
- theme=dark mit Path=/ schreiben und theme lesen.
- drink vor dem Schreiben lesen: null.
- tea / regular kodieren und unverändert lesen.
- HttpOnly, Secure und SameSite für eine Sitzung nennen.
- Die Zeile lesen: theme / dark.
Typische Fehler und Merksatz
document.cookie ist weder Objekt noch Geheimfach. Nicht den ganzen Text vergleichen, Path=/ nicht vergessen und rohe ; oder = nicht in Werte setzen. Für sensible Sitzungskennungen setzt der Server HttpOnly, Secure und SameSite; theme ergibt dark.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt