JavaScript und Cookies

Articles

Dieser Artikel erklärt JavaScript und Cookies.

Wir werden alles Schritt für Schritt sorgfältig erklären, von den Grundlagen der Cookies, dem Lesen und Schreiben, der Sicherheit bis hin zu praktischen Beispielen.

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScript und Cookies

Cookie bezeichnet kleine Datenmengen, die im Browser des Nutzers gespeichert werden. Sie werden hauptsächlich für folgende Zwecke verwendet:.

Benutzerauthentifizierung (Beibehaltung des Login-Status)
Speichern von Benutzereinstellungen (Sprache, Thema usw.)
Tracking (Browserverlauf usw.)

In JavaScript können Sie Cookies mit document.cookie lesen und schreiben.

Erstellen (Schreiben) von Cookies

Cookies werden mit folgender Syntax erstellt:.

1document.cookie = "username=JohnDoe";

Dieser Code speichert ein Cookie mit dem Namen "username=JohnDoe" im Browser.

Erstellen von Cookies mit einem Ablaufdatum

Cookies können mit einem Ablaufdatum versehen werden. Wenn kein Ablaufdatum festgelegt ist, wird es als Session-Cookie behandelt und beim Schließen des Browsers gelöscht.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

Das Attribut expires gibt das Ablaufdatum des Cookies im UTC-Format an.
Das Attribut path gibt den Pfad an, für den das Cookie gesendet wird. / bedeutet die gesamte Website.
Wenn Sie SameSite=None angeben, wird das Cookie auch bei Cross-Site-Anfragen gesendet. In diesem Fall müssen Sie jedoch immer das Attribut Secure angeben.
Durch Angabe von Secure wird das Cookie nur bei HTTPS-Kommunikation übertragen, was die Sicherheit erhöht.
Durch Zugriff auf document.cookie können Sie alle auf der aktuellen Seite verfügbaren Cookies als Zeichenkette abrufen.
Mit console.log können Sie den Unterschied zwischen den tatsächlich im Browser gesetzten Cookie-Werten und den abrufbaren Werten überprüfen.

Auslesen (Lesen) von Cookies

Mit document.cookie können Sie alle Cookies als Zeichenkette abrufen.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

Der Rückgabewert von document.cookie ist eine einzelne Zeichenkette, in der alle Cookies im Format 'key=value;' zusammengefügt sind.
Es ist praktisch, eine Funktion zu verwenden, um diese Zeichenkette zu parsen und den gewünschten Wert zu extrahieren.

Funktion zum Abrufen des Werts eines Cookies

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

Diese Funktion trennt Schlüssel und Werte mittels split() und gibt den Wert zurück, wenn er dem angegebenen Schlüssel entspricht.
Mit decodeURIComponent können Sie kodierte Zeichen korrekt auslesen.
Wenn der entsprechende Schlüssel nicht existiert, wird null zurückgegeben.

Löschen von Cookies

Ein Cookie kann gelöscht werden, indem das Ablaufdatum auf ein Datum in der Vergangenheit gesetzt wird.

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

Indem Sie username einen leeren Wert zuweisen und das Ablaufdatum in die Vergangenheit setzen, wird es gelöscht.
Beim Löschen eines Cookie müssen die Attribute path, SameSite und Secure mit denen übereinstimmen, die beim Erstellen verwendet wurden.
In diesem Beispiel wird username gelöscht, andere Cookies wie theme=dark bleiben erhalten.

Cookie-Optionen

Sie können verschiedene Optionen angeben, um das Verhalten eines Cookies zu steuern. Die wichtigsten sind wie folgt:.

expires Gibt das Ablaufdatum des Cookies im UTC-Format an. Wenn nicht angegeben, wird das Cookie zu einem Session-Cookie und beim Schließen des Browsers gelöscht.
max-age Gibt das Ablaufdatum des Cookies in Sekunden an. Dies hat Vorrang vor expires.
path Gibt den Pfad an, für den das Cookie gesendet wird. Wenn Sie beispielsweise /admin angeben, wird das Cookie nur an Seiten unter diesem Pfad gesendet.
domain Gibt die Domain an, für die das Cookie gültig ist. Normalerweise wird die aktuelle Domain verwendet, aber Sie können es auch auf alle Subdomains anwenden, z. B. .example.com.
secure Wenn dieses Attribut gesetzt ist, wird das Cookie nur über HTTPS übertragen. Für erhöhte Sicherheit sollten Sie dieses Attribut bei sensiblen Informationen immer setzen.
SameSite Steuert, ob Cookies bei Cross-Site-Requests gesendet werden. Sie können einen der folgenden drei Werte angeben:.
- Strict Cookies werden nur für Anfragen von derselben Website gesendet.
- Lax Cookies werden für reguläre Navigation gesendet, jedoch mit einigen Einschränkungen.
- None Cookies können auch bei Cross-Site-Requests gesendet werden. Dabei ist jedoch auch das Attribut Secure erforderlich.

Beispiel: Sicheres Cookie

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

Wenn Sie secure angeben, wird das Cookie nur über HTTPS-Kommunikation gesendet.
Wenn Sie SameSite=Strict angeben, wird das Cookie nicht bei Cross-Site-Anfragen gesendet, was als CSRF-Gegenmaßnahme wirksam ist.
Solche sicheren Attribute sind für wichtige Cookies, die zur Authentifizierung oder Sitzungsverwaltung verwendet werden, unerlässlich.

Kodierung und Dekodierung

Da Cookie-Werte Sonderzeichen enthalten können, ist es sicherer, encodeURIComponent zu verwenden.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

Mit encodeURIComponent können Sie Leerzeichen, Symbole usw. sicher in einem Cookie speichern.
Beim Auslesen verwenden Sie decodeURIComponent, um die ursprüngliche Zeichenkette wiederherzustellen.
In diesem Beispiel wird mit max-age=604800 die Ablaufzeit auf 7 Tage (604.800 Sekunden) festgelegt. Dies ist eine Methode zur Festlegung des Ablaufdatums, ähnlich wie bei expires. max-age kann in Sekunden angegeben werden und ist oft einfacher zu verwenden.

Praktisches Beispiel: Speichern und Laden eines Themes

Das folgende Beispiel zeigt, wie das vom Benutzer gewählte Theme in einem Cookie gespeichert und beim nächsten Besuch automatisch angewendet wird.

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

Die Funktion setTheme speichert das ausgewählte Theme in einem Cookie und ruft anschließend sofort applyTheme auf, um den Bildschirm zu aktualisieren.
Die Funktion applyTheme ändert die Hintergrund- und Textfarben des body entsprechend dem Theme.
Da in diesem Beispiel max-age=604800 gesetzt ist, bleibt die Theme-Einstellung eine Woche lang erhalten.
Da die Auswahl des Nutzers beim erneuten Besuch der Seite erhalten bleibt, wird die Nutzererfahrung verbessert.

Cookie-Beschränkungen und Hinweise

Beachten Sie beim Verwenden von Cookies folgende Punkte:.

Größenbeschränkungen Die Größe eines einzelnen Cookies ist auf etwa 4 KB begrenzt.
Begrenzung der Anzahl speicherbarer Cookies Je nach Browser können Sie circa 20 bis 50 Einträge pro Domain speichern.
Sicherheitsvorkehrungen Der Inhalt von Cookies wird grundsätzlich im Klartext gespeichert, daher sind sie nicht zur Speicherung vertraulicher Informationen wie Passwörtern geeignet.
Cookies, die von JavaScript nicht zugänglich sind Cookies mit dem Attribut HttpOnly können aus Sicherheitsgründen nicht von JavaScript gelesen werden.

Server und `Cookies`

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

Einige Cookie-Attribute, wie HttpOnly, können nicht über JavaScript gesetzt werden. Diese müssen serverseitig gesetzt werden.

Zusammenfassung

Das Bearbeiten von Cookies mit JavaScript kann die Benutzererfahrung verbessern und den Zustand aufrechterhalten. Beachten Sie jedoch die folgenden Punkte, um sie sicher und angemessen zu handhaben.

Speichern Sie nur die unbedingt notwendigen Informationen Aus Datenschutz- und Sicherheitsgründen sollten persönliche oder sensible Daten nicht gespeichert und nur unbedingt notwendige Informationen erfasst werden.
Sicherheitsattribute richtig einstellen Setzen Sie Attribute wie Secure und SameSite, um Cross-Site-Attacken wie XSS und CSRF zu verhindern.
Kodierung und Dekodierung von Daten Verwenden Sie encodeURIComponent und decodeURIComponent, um Cookie-Werte sicher zu speichern und auszulesen, damit Sonderzeichen und japanische Zeichen korrekt verarbeitet werden können.

Wenn Sie die richtige Verwendung von Cookies erlernen, können Sie fortschrittlichere und sicherere Webanwendungen entwickeln.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Shared Worker in JavaScript JavaScript und `Web Storage`

JavaScript und Cookies

YouTube Video

JavaScript und Cookies

Erstellen (Schreiben) von Cookies

Erstellen von Cookies mit einem Ablaufdatum

Auslesen (Lesen) von Cookies

Funktion zum Abrufen des Werts eines Cookies

Löschen von Cookies

Cookie-Optionen

Beispiel: Sicheres Cookie

Kodierung und Dekodierung

Praktisches Beispiel: Speichern und Laden eines Themes

Cookie-Beschränkungen und Hinweise

Server und Cookies

Zusammenfassung

YouTube Video

Server und `Cookies`