JavaScript und Cookies

Hallo zusammen, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine köstliche Reise in die Welt der Cookies. Nein, nicht die Art, die man in Milch taucht (obwohl ich mir jetzt einen davon nicht verkneifen könnte), sondern die digitale Art, die unsere Web-Erfahrungen glatter und persönlicher macht. Also, schnallt euch eure virtuelle Schürze um und lasst uns anfangen zu backen... ich meine, zu coden!

Was sind Cookies?

Cookies sind kleine Datenpakete, die auf dem Computer eines Benutzers von den Websites gespeichert werden, die sie besuchen. Stellt euch vor, sie sind kleine digitale Notizzettel, die Websites an euren Computer heften, um Dinge über euch zu erinnern. Diese "Notizzettel" können verschiedene Informationen enthalten, wie zum Beispiel eure Präferenzen, Anmeldeinformationen oder Artikel in eurem Einkaufswagen.

Als ich zum ersten Mal von Cookies erfahren habe, habe ich mir winzige Computer-Elfen vorgestellt, die Notizen kritzeln und sie in meinen PC stopfen. Obwohl das nicht so genau ist, ist es eine nicht schlechte Weise, das Konzept zu visualisieren!

Warum sind Cookies notwendig?

Vielleicht fragt ihr euch, "Warum können Websites nicht einfach Dinge ohne diese Cookie-Dinger erinnern?" Lassen mich euch eine kleine Geschichte erzählen.

Stellt euch vor, ihr seid in einer belebten Kaffebar. Ihr bestellt einen Kaffee und ein Sandwich, aber dann müsst ihr die Toilette benutzen. Wenn ihr zurückkommt, wie weiß der Barista unter all den Kunden, welcher Auftrag von euch ist? Genau hier kommen Cookies im digitalen Welt zum Einsatz.

Cookies sind aus mehreren Gründen notwendig:

1. Erinnerung der Benutzereinstellungen
2. Halten der Benutzer angemeldet
3. Verfolgen von Artikeln im Einkaufswagen
4. Personalisierung der Benutzererfahrung
5. Analyse des Benutzerverhaltens zur Verbesserung

Ohne Cookies wäre jeder Website-Besuch wie ein erstes Treffen - keine Erinnerung an eure Präferenzen, kein gespeicherter Login, keine Artikel im Einkaufswagen. Nicht sehr praktisch, oder?

Wie funktioniert es?

Nun, lassen uns einen Blick unter die Haube werfen und sehen, wie diese digitalen Cookies eigentlich funktionieren. Keine Sorge, es ist nicht so kompliziert, wie es sich anhören mag!

Wenn ihr eine Website besucht, kann sie einen Cookie an euren Browser senden. Euer Browser speichert diesen Cookie auf eurem Computer. Beim nächsten Besuch der gleichen Website sendet euer Browser den Cookie zurück an die Website. Es ist wie ein geheimes Handshake zwischen eurem Computer und der Website.

Hier ist eine einfache Darstellung davon, wie es funktioniert:

Benutzer besucht Website
↓
Website sendet Cookie
↓
Browser speichert Cookie
↓
Benutzer besucht Website erneut
↓
Browser sendet Cookie
↓
Website erkennt Benutzer

Nun, da wir die Grundlagen verstehen, lasst uns die Ärmel hochkrempeln und mit Cookies in JavaScript arbeiten!

Setzen/Lagern von Cookies

Ein Cookie zu setzen ist wie eine Notiz für später zu hinterlassen. In JavaScript verwenden wir die Eigenschaft document.cookie, um einen Cookie zu erstellen. So könnt ihr das machen:

document.cookie = "username=John Doe";

Lassen wir das auseinanderbrechen:

• document.cookie ist die Eigenschaft, die wir verwenden, um mit Cookies zu interagieren.
• "username=John Doe" ist der tatsächliche Cookie. Es ist ein Schlüssel-Wert-Paar, wobei username der Schlüssel und John Doe der Wert ist.

Ihr könnt auch mehrere Cookies setzen:

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

Jede document.cookie-Anweisung erstellt ein neues Cookie. Sie überschreibt die bestehenden nicht.

Lesen von Cookies

Cookies zu lesen ist wie das Durchwühlen der Notizen, die ihr für euch selbst hinterlassen habt. So könnt ihr Cookies lesen:

let allCookies = document.cookie;
console.log(allCookies);

Dies gibt euch alle Cookies als einen langen String. Normalerweise wollt ihr aber einen bestimmten Cookie-Wert erhalten. Hier ist eine Funktion dazu:

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// Verwendung
let username = getCookie("username");
console.log(username); // Ausgabe: John Doe

Diese Funktion teilt den Cookie-String, durchläuft jeden Cookie und gibt den Wert zurück, wenn sie eine Übereinstimmung findet.

Setzen eines Ablaufdatums für Cookies

Cookies sind wie Milch - sie können verderben, wenn man sie zu lange liegen lässt. Standardmäßig laufen Cookies ab, wenn die Browser-Sitzung endet. Aber ihr könnt ein spezifisches Ablaufdatum setzen:

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

Dieser Cookie läuft in einem Monat ab. Das expires-Attributweist den Browser darauf hin, wann der Cookie gelöscht werden soll.

Löschen eines Cookies

Manchmal müsst ihr einen Cookie wegschmeißen. Um ein Cookie zu löschen, setztir sein Ablaufdatum auf ein vergangenes Datum:

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

Dies setzt den Cookie-Wert auf leer und sein Ablaufdatum auf einen Zeitpunkt in der Vergangenheit, was effektiv bedeutet, dass er gelöscht wird.

Aktualisieren von Cookies

Ein Cookie zu aktualisieren ist so einfach wie das Setzen desselben erneut mit einem neuen Wert:

document.cookie = "username=Jane Doe";

Wenn ein Cookie mit dem Namen "username" bereits existiert, wird sein Wert aktualisiert. Existiert er nicht, wird ein neuer Cookie erstellt.

Cookie-Methode-Tabelle

Hier ist eine praktische Tabelle, die die Methoden zusammenfasst, die wir gelernt haben:

Aktion	Methode
Cookie setzen	document.cookie = "key=value";
Alle Cookies lesen	let allCookies = document.cookie;
Specificches Cookie lesen	Verwenden der getCookie()-Funktion
Ablaufdatum setzen	document.cookie = "key=value; expires=date";
Cookie löschen	Setzen des Ablaufdatums auf ein vergangenes Datum
Cookie aktualisieren	Cookie erneut mit neuem Wert setzen

Und da habt ihr es, Leute! Ihr seid jetzt mit dem Wissen ausgerüstet, um mit Cookies in JavaScript zu arbeiten. Denkt daran, dass mit großer Macht große Verantwortung verbunden ist. Respektiert immer die Privatsphäre der Benutzer und seid transparent in der Verwendung von Cookies.

Beim nächsten Surfen im Web, wenn eine Website eure Präferenzen remembers, könnt ihr mit einem knowing Lächeln denken, "Ah, Cookies am Werk!" Frohes Coden und mögen eure digitalen Cookies immer frisch und eure echten Cookies immer lecker sein!

Credits: Image by storyset