Umfassender Leitfaden zu Cookies in JavaScript

Cookies in JavaScript

Cookies sind kleine Datenstücke, die von einer Website im Browser des Benutzers gespeichert werden. Sie werden häufig verwendet, um Benutzereinstellungen zu speichern, Sitzungen zu verfolgen oder den Status zwischen Anfragen aufrechtzuerhalten.

JavaScript bietet einfache Methoden zum Erstellen, Lesen und Löschen von Cookies und ist damit ein unverzichtbares Werkzeug für die clientseitige Speicherung und Sitzungsverwaltung.

---

1. Cookies setzen

Cookies werden erstellt, indem document.cookie eine Zeichenfolge zugewiesen wird.

Syntax:

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

• key=value: Schlüssel-Wert-Paar des Cookies.
• läuft ab: Ablaufdatum (optional). Wenn es nicht gesetzt ist, ist das Cookie ein Sitzungscookie und wird gelöscht, wenn der Browser geschlossen wird.
• Pfad: Pfad innerhalb der Site, auf der das Cookie zugänglich ist (Standard: aktueller Pfad).
• Domäne: Domäne, auf die das Cookie zugegriffen werden kann (Standard: aktuelle Domäne).
• sicher: Cookie wird nur über HTTPS gesendet.
• SameSite: Steuert das standortübergreifende Verhalten (Streng, Lax oder Keine).

Beispiel:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

---

2. Cookies lesen

Die Eigenschaft document.cookie gibt alle Cookies für die aktuelle Domäne und den aktuellen Pfad als einzelne Zeichenfolge zurück.

Beispiel:

console.log(document.cookie);
// Output: "username=JohnDoe; theme=dark; sessionId=abc123"

Um bestimmte Cookies zu extrahieren, analysieren Sie die Zeichenfolge:

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}
console.log(getCookie("username")); // Output: JohnDoe

---

3. Cookies aktualisieren

Um ein Cookie zu aktualisieren, setzen Sie es erneut mit demselben Schlüssel, aber unterschiedlichen Werten oder Optionen.

Beispiel:

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
console.log(document.cookie); // Output: "username=JaneDoe; ..."

---

4. Cookies löschen

Um ein Cookie zu löschen, legen Sie dessen Ablaufdatum auf ein vergangenes Datum fest.

Beispiel:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

---

5. Umgang mit Sonderzeichen

Sonderzeichen in Cookie-Werten müssen mit encodeURIComponent codiert und mit decodeURIComponent decodiert werden.

Beispiel:

document.cookie = "userInfo=" + encodeURIComponent("John Doe & Admin");
console.log(decodeURIComponent(getCookie("userInfo"))); // Output: John Doe & Admin

---

6. Sicherheitsüberlegungen

1. Sicheres Flag:
   • Verwenden Sie Secure, um sicherzustellen, dass Cookies nur über HTTPS übertragen werden.

   document.cookie = "sessionId=abc123; secure";

1. Nur ​​HTTP-Cookies:

   • Kann nicht über JavaScript aufgerufen werden (serverseitig eingestellt).

2. SameSite-Attribut:

   • Kontrolliert das standortübergreifende Cookie-Verhalten, um CSRF-Angriffe zu verhindern.

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

---

7. Zusammenfassung der Cookie-Attribute

Attribute	Description
expires	Expiration date for the cookie.
path	Limits cookie to specific paths.
domain	Specifies the domain for the cookie.
secure	Ensures cookie is sent over HTTPS.
SameSite	Controls cross-site cookie behavior.

---

8. Cookies mit JavaScript verwalten

Um die Cookie-Verwaltung zu vereinfachen, kapseln Sie allgemeine Vorgänge in Dienstprogrammfunktionen.

Beispiel:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

---

9. Zusammenfassung

Cookies sind ein grundlegendes Werkzeug zur Aufrechterhaltung des Zustands in Webanwendungen. Die richtige Handhabung stellt die Funktionalität sicher und schützt gleichzeitig die Benutzerdaten.

• Verwenden Sie Secure und SameSite für sicherere Cookies.
• Vermeiden Sie es, vertrauliche Informationen direkt in Cookies zu speichern.
• Verwenden Sie JavaScript-Dienstprogramme, um die Cookie-Verwaltung zu vereinfachen.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonUmfassender Leitfaden zu Cookies in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!