Einführung in Cookies: JavaScript-Cookies verstehen und mit ihnen arbeiten

Preslav Dobrev2022-10-25 · 8 min read

Einführung in Cookies: JavaScript-Cookies verstehen und mit ihnen arbeiten

Browser-Cookies oder HTTP-Cookies, sind Textdateien, die aus winzigen Datenmengen bestehen. Websites nutzen diese Informationen, um den Weg eines Nutzers zu verfolgen, was es ihnen ermöglicht, maßgeschneiderte Funktionen anzubieten und das Surferlebnis zu verbessern. Cookies können bis zu 4096 Byte an Daten speichern. Je nach Browser können wir jedoch nur eine begrenzte Anzahl von Cookies pro Domain hinzufügen.

Ein grundlegendes Verständnis von HTTP-Cookies ist für jeden Internetnutzer unerlässlich, egal ob Sie nur zum Spaß surfen oder Ihren Lebensunterhalt damit verdienen. Diese Anleitung wird Ihnen Cookies und ihre verschiedenen Typen im Detail vorstellen. Unser Fokus liegt darauf, Ihnen zu helfen, JavaScript-Cookies zu verstehen und mit ihnen zu arbeiten.

Legen wir los!

Voraussetzungen

Um diesem Tutorial folgen zu können, müssen Sie über Folgendes verfügen:

Ein grundlegendes Verständnis von JavaScript.

Erste Schritte mit JavaScript-Cookies

Das Arbeiten mit JavaScript-Cookies ist unkompliziert. Es ermöglicht das mühelose Erstellen, Bearbeiten und Abrufen von Cookies. Außerdem können wir die Cookie-Eigenschaft des Document-Objekts verwenden, um Cookie-Eigenschaften wie Name, Wert und Länge zu manipulieren und einzuschränken, um nur einige zu nennen.

Arten von Cookies

Werfen wir zunächst einen Blick auf die verschiedenen Arten von Cookies:

First-Party-Cookies

Diese Cookies werden jedes Mal erstellt und gespeichert, wenn ein Nutzer eine Website besucht. Sie ermöglichen es Website-Betreibern, detaillierte Einblicke in die Daten der Nutzer zu erhalten und ihnen ein besseres Surferlebnis zu bieten.

Persistente Cookies

Für diese Art von Cookie legt der Aussteller ein Ablaufdatum fest. Daher wird es über einen viel längeren Zeitraum verwendet. Das bedeutet, dass das Cookie auch dann im Browser verbleibt, wenn Sie ihn schließen. Außerdem werden die Daten bei jedem Besuch der Website, die das Cookie erstellt hat, an den Aussteller zurückgesendet.

Session-Cookies

Diese Cookies sind nur vorübergehend und werden im Speicher Ihres Browsers abgelegt, während dieser geöffnet ist. Wenn Sie ihn schließen, wird das Cookie aus dem Verlauf Ihres Browsers gelöscht, was sie zu einem geringeren Sicherheitsrisiko macht. Sie müssen kein Ablaufdatum angeben.

Third-Party-Cookies

Third-Party-Cookies werden von einer Website erstellt, die Sie aktuell nicht besuchen. Meistens sind diese Cookies hilfreich, um einen Nutzer zu verfolgen, der auf eine Anzeige geklickt hat, und ihn der Domain zuzuordnen, die ihn weitergeleitet hat.

Cookies erstellen

Wir können Cookies mit zwei Methoden erstellen:

Senden von Set-Cookie im HTTP-Antwort-Header. Abhängig von den für den Webserver verwendeten Technologien können Sie Cookie-Header mithilfe von Tools und Bibliotheken verwalten. Cookies können Informationen wie ein Ablaufdatum und Sicherheitsfunktionen wie die Secure-Direktive und das HttpOnly-Flag enthalten.

HttpOnly: Es gibt an, dass der Browser Cookies nicht lesen oder ändern kann.
Secure: Dies gibt an, dass das Cookie nur über HTTPS gesendet werden kann.

Mit der JavaScript-Eigenschaft document.cookie können wir Cookies erstellen, lesen und löschen.

Schritt 1 — Erstellen eines Cookies

Als Nächstes demonstrieren wir den Prozess des Erstellens eines JavaScript-Cookies. Cookies werden im Name-Wert-Paar-Format gespeichert:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

Im obigen Cookie ist UserName der Name des Cookies, während CloudSigma der darin gespeicherte Wert ist.

Das Cookie hat ein Ablaufdatum. Standardmäßig wird es beim Schließen des Browsers automatisch gelöscht. Sie können Ihrem Cookie auch ein Ablaufdatum hinzufügen:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Standardmäßig gehören Cookies zur aktuellen Seite. Wir können das Cookie jedoch auch mithilfe des Parameters path spezifizieren:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age vs. Cookie Expire

Je nach Ihren Anforderungen können Sie diese beiden Strategien verwenden, um das Ablaufdatum eines Cookies festzulegen. Der Unterschied zwischen den beiden besteht darin, dass expires ein Ablaufdatum festlegt, an dem ein Cookie gelöscht wird. Im Gegensatz dazu bestimmt max-Age legt die Zeit in Sekunden fest, nach der ein Cookie gelöscht wird. Leider wird max-age nicht von allen Browsern unterstützt.

Beispiel für das Setzen eines Cookies mit expires und max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // in Millisekunden
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // in Millisekunden

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Schritt 2 — Lesen eines Cookies

Das document.cookie-Attribut gibt eine Zeichenkette zurück. Wenn zwei oder mehr Cookies vorhanden sind, verwenden wir ein Semikolon ( ;) und ein Leerzeichen, um sie zu trennen.

Wir verwenden die split()-Methode, um ein einzelnes Cookie aus einer Liste von Cookies zu extrahieren. Diese Methode zerlegt die Liste in einzelne Namen- und Wertpaare. Sobald dies geschehen ist, können Sie nach dem Ziel-Cookie suchen, das Sie lesen möchten:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Willkommen zurück, " + UserName);
} else {
    firstName = prompt("Geben Sie Ihren Benutzernamen ein:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Willkommen zurück, " + UserName);

} else {

firstName = prompt("Geben Sie Ihren Benutzernamen ein:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Lassen Sie uns die Funktionen verstehen, die wir im Code erstellt haben:

Funktionsname	Beschreibung
setCookie()	Erstellt ein Cookie
getCookie()	Liest den Wert des Cookies
checkCookie()	Überprüft, ob der UserName gesetzt ist oder nicht.

Im nächsten Schritt werden wir lernen, wie man ein Cookie aktualisiert.

Schritt 3 — Aktualisieren eines Cookies

Wir können den Attributen unseres Cookies neue Werte zuweisen. In unserem Beispiel aktualisieren wir das Abonnement des Benutzers vom Monatsplan auf den Quartalsplan.

Aktualisieren wir das max-age-Attribut des UserName-Cookies von 30 Tagen auf 180 Tage:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Schritt 4 — Löschen eines Cookies

Das Umbenennen des Cookies mit demselben Namen löscht das Cookie, das Sie entfernen möchten. Wir können ein Cookie löschen, indem wir das max-age-Attribut auf 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Zusätzlich, wenn das Cookie einen bestimmten Pfad hat, löschen Sie es, indem Sie diesen angeben:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Fazit

Cookies sind notwendig, damit eine Website ordnungsgemäß funktioniert. In diesem einführenden Tutorial haben wir Cookies und ihre verschiedenen Typen im Detail besprochen. Darüber hinaus haben wir gelernt, mithilfe eines Beispiels mit Cookies zu arbeiten. Da Sie nun mit der Verwendung von JavaScript-Cookies vertraut sind, beginnen Sie mit der Erstellung benutzerdefinierter Cookies, um mehr über das Thema zu erfahren und zu entdecken.

Darüber hinaus gibt es viele Tutorials zu JavaScript und Webentwicklung, die Sie in unserem Blog:

Viel Spaß beim Programmieren!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev ist ein kreativer Designer bei CloudSigma und konzentriert sich auf eine konsistente Unternehmensidentität durch traditionelle und innovative Marketingkanäle. Er versteht es meisterhaft, künstlerische Vision mit strategischem Marketing zu verbinden, um wirkungsvolle Markengeschichten zu schaffen.