Arbeiten mit Cookies in JavaScript

Arbeiten mit Cookies in JavaScript

Cookies sind kleine Datenmengen, die von Webbrowsern auf dem Client (dem Nutzerrechner) gespeichert werden. Sie bieten Entwicklern eine praktische Möglichkeit, Benutzereinstellungen wie zum Beispiel das bevorzugte Farbschema, kürzlich angesehene Produkte oder ähnliche Informationen zu speichern. Durch den Einsatz von Cookies müssen solche Einstellungen nicht dauerhaft auf dem Server abgelegt werden, was den Server entlastet und Speicherplatz spart.

Vorteile und Nachteile

Ein wesentlicher Vorteil von Cookies liegt darin, dass Sie viele nicht kritische Informationen direkt auf dem Client speichern können. Dies reduziert den Datenverkehr zum Server und spart Ressourcen.
Allerdings gibt es auch Nachteile:

• Cookies können von beliebigen Skripten auf dem Computer des Nutzers ausgelesen werden, selbst wenn diese Skripte nicht von Ihrer Website stammen. Daher sollten keine vertraulichen Daten wie Authentifizierungsinformationen, Kreditkartennummern oder Passwörter in Cookies gespeichert werden.
• Werden Cookies in einem bestimmten Browser abgelegt, so sind sie in einem anderen Browser nicht verfügbar, da sie jeweils vom lokalen Browser verwaltet werden.

Überprüfung der Cookie-Unterstützung

Bevor Sie Cookies in Ihrer Anwendung nutzen, sollten Sie prüfen, ob der Browser des Nutzers Cookies unterstützt. Dies können Sie mit folgender Abfrage erreichen:

 if (navigator.cookieEnabled) {
  // Cookies werden unterstützt – Sie können sie setzen und auslesen
 }

Cookies setzen

Um ein Cookie zu setzen, weisen Sie dem document.cookie-Eigenschaft einen String im folgenden Format zu:

 document.cookie = "=; [expires=;] [domain=;] [path=;] [secure;]";

Im einfachsten Fall genügt es, nur den Namen und den Wert anzugeben. Möchten Sie ein Ablaufdatum setzen, geben Sie dieses Datum im Format
 Mon, 23 Feb 2019 00:05:07 GMT
an. Nach Ablauf dieses Datums wird das Cookie automatisch gelöscht. Um das Datum dynamisch zu erzeugen, können Sie beispielsweise die setTime()- und toGMTString()-Methoden eines Date-Objekts verwenden:

 let newDate = new Date();
 newDate.setTime(newDate.getTime() + 36000000); // Cookie läuft in 10 Stunden ab
 let endDate = newDate.toGMTString();

Cookies auslesen

Wenn Sie den Wert eines Cookies benötigen, können Sie auf document.cookie zugreifen. Dabei wird eine Zeichenkette zurückgegeben, die alle Cookies im Format
 "name1=Wert1; name2=Wert2"
enthält.

Cookies löschen

Zum Löschen eines Cookies setzen Sie es einfach mit einem bereits verstrichenen Ablaufdatum. Dies ist der einzige Weg, ein Cookie zu entfernen.

Nützliche Funktionen für den Umgang mit Cookies

Um das Arbeiten mit Cookies zu erleichtern, finden Sie hier einige Hilfsfunktionen, mit denen Sie Cookies setzen, auslesen und löschen können:

function setCookie(name, value, expire, path, domain, secure) {
if (!name || !value) {
return false;
}
var str = name + '=' + encodeURIComponent(value);
if(expire) {
str += '; expires=' + expire.toGMTString();
}
if (path) {
str += '; path=' + path;
}
if (domain) {
str += '; domain=' + domain;
}
if (secure) {
str += '; secure';
}
document.cookie = str;
return true;
}

function getCookie(name) {
var pattern = "(?:; )?" + name + "=([^;]*);?";
var regexp = new RegExp(pattern);
if(regexp.test(document.cookie)) {
return decodeURIComponent(RegExp["$1"]);
}
return false;
}

function deleteCookie(name, path, domain) {
setCookie(name, null, new Date(0), path, domain);
return true;
}

Beispielanwendung:

1. Ein Cookie setzen – nur Name und Wert:  setCookie('color', 'red');
2. Ein Cookie auslesen:  var color = getCookie('color');
3. Den Wert des Cookies anzeigen:  window.alert(color);

Fazit

Mit Cookies können Sie auf einfache Weise clientseitige Informationen speichern und so beispielsweise Benutzereinstellungen verwalten, ohne den Server zu belasten. Achten Sie dabei jedoch stets darauf, keine sensiblen Daten in Cookies abzulegen und berücksichtigen Sie, dass Cookies browserabhängig sind.
Die vorgestellten Funktionen erleichtern den Umgang mit Cookies – so können Sie diese schnell setzen, auslesen und wieder löschen. Nutzen Sie diese Techniken, um Ihre Webanwendungen benutzerfreundlicher und effizienter zu gestalten.