JavaScript Cookie

Cookies werden verwendet, um Benutzerinformationen auf Webseiten zu speichern.

Was ist ein Cookie?

Cookies sind Daten, die in Textdateien auf Ihrem Computer gespeichert sind.

Wenn ein Webserver eine Webseite an einen Browser sendet, zeichnet der Server nach dem Schließen der Verbindung die Benutzerinformationen nicht auf.

Die Rolle des Cookies besteht darin, "wie Client-Benutzerinformationen aufgezeichnet werden" zu lösen:

  • Wenn ein Benutzer eine Webseite besucht, kann sein Name in einem Cookie aufgezeichnet werden.
  • Wenn der Benutzer die Seite das nächste Mal besucht, kann der Besuchsdatensatz des Benutzers aus dem Cookie gelesen werden.

Cookies werden in Name/Wert-Paaren gespeichert, wie unten gezeigt:

username=John Doe

Wenn ein Browser eine Webseite von einem Server anfordert, werden die zu dieser Seite gehörenden Cookies hinzugefügt. Der Server erhält auf diese Weise die Informationen des Benutzers.

Mit JavaScript ein Cookie erstellen

JavaScript kann diedocument.cookie-Eigenschaft verwenden, um Cookies zu erstellen, zu lesen und zu löschen.

In JavaScript erfolgt das Erstellen eines Cookies wie folgt:

document.cookie="username=John Doe";

Sie können auch eine Ablaufzeit für das Cookie hinzufügen (in UTC- oder GMT-Zeit). Standardmäßig wird das Cookie gelöscht, wenn der Browser geschlossen wird:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

Sie können den Parameter path verwenden, um dem Browser den Pfad des Cookies mitzuteilen. Standardmäßig gehört das Cookie zur aktuellen Seite.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

JavaScript zum Lesen eines Cookies verwenden

In JavaScript können Sie den folgenden Code verwenden, um ein Cookie zu lesen:

var x = document.cookie;

Note document.cookie gibt alle Cookies als String im Format zurück: cookie1=value; cookie2=value; cookie3=value;

JavaScript zum Ändern eines Cookies verwenden

In JavaScript ist das Ändern eines Cookies ähnlich wie das Erstellen eines Cookies, wie unten gezeigt:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

Das alte Cookie wird überschrieben.

JavaScript zum Löschen eines Cookies verwenden

Das Löschen eines Cookies ist sehr einfach. Sie müssen nur den expires-Parameter auf einen Zeitpunkt in der Vergangenheit setzen, wie unten gezeigt, auf Thu, 01 Jan 1970 00:00:00 GMT gesetzt:

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

Beachten Sie, dass Sie den Cookie-Wert beim Löschen nicht angeben müssen.

Cookie-Zeichenfolge

Die Eigenschaft document.cookie sieht wie eine gewöhnliche Textzeichenfolge aus, ist es aber nicht.

Selbst wenn Sie eine vollständige Cookie-Zeichenfolge in document.cookie schreiben, wird die Cookie-Information, wenn Sie sie erneut lesen, in Form von Name/Wert-Paaren angezeigt.

Wenn Sie ein neues Cookie setzen, wird das alte Cookie nicht überschrieben. Das neue Cookie wird zu document.cookie hinzugefügt. Wenn Sie document.cookie also erneut lesen, erhalten Sie Daten wie unten gezeigt:

cookie1=value; cookie2=value;

     

Wenn Sie einen bestimmten Cookie-Wert finden müssen, müssen Sie eine JavaScript-Funktion erstellen, die den Cookie-Wert im Cookie-String nachschlägt.

JavaScript-Cookie-Beispiele

In den folgenden Beispielen erstellen wir Cookies, um Besuchernamen zu speichern.

Wenn ein Besucher eine Webseite besucht, wird er zunächst gebeten, seinen Namen einzugeben. Der Name wird in einem Cookie gespeichert.

Wenn der Besucher die Seite das nächste Mal besucht, sieht er eine Willkommensnachricht.

In diesem Beispiel erstellen wir 3 JavaScript-Funktionen:

  1. Funktion zum Setzen des Cookie-Werts
  2. Funktion zum Abrufen des Cookie-Werts
  3. Funktion zum Überprüfen des Cookie-Werts

Funktion zum Setzen des Cookie-Werts

Zuerst erstellen wir eine Funktion, um den Namen des Besuchers zu speichern:

function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; }

Aufschlüsselung der Funktion:

In den obigen Funktionsparametern ist der Cookie-Name cname, der Cookie-Wert cvalue, und die Cookie-Ablaufzeit expires wird gesetzt.

Diese Funktion setzt den Cookie-Namen, den Cookie-Wert und die Cookie-Ablaufzeit.

Funktion zum Abrufen des Cookie-Werts

Dann erstellen wir eine Funktion, die den Wert eines angegebenen Cookies zurückgibt:

function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; }

Aufschlüsselung der Funktion:

Der Parameter für den Cookie-Namen ist cname.

Erstelle eine Textvariable, um nach dem angegebenen Cookie zu suchen: cname + "=".

Verwende Semikolons, um den document.cookie-String zu teilen, und weise das resultierende String-Array der Variablen ca zu (ca = document.cookie.split(';')).

Durchlaufe das ca-Array (i=0;i<ca.length;i++), lies dann jeden Wert im Array aus und entferne führende und nachfolgende Leerzeichen (c=ca[i].trim()).

Wenn das Cookie gefunden wird (c.indexOf(name) == 0), gib den Wert des Cookies zurück (c.substring(name.length, c.length)).

Wenn das Cookie nicht gefunden wird, gib "" zurück.

Funktion zum Überprüfen des Cookie-Werts

Schließlich können wir eine Funktion erstellen, um zu überprüfen, ob ein Cookie erstellt wurde.

Wenn das Cookie gesetzt ist, wird eine Begrüßungsnachricht angezeigt.

Wenn das Cookie nicht gesetzt ist, wird ein Popup angezeigt, um nach dem Namen des Besuchers zu fragen, und die Funktion setCookie wird aufgerufen, um den Namen des Besuchers für 365 Tage zu speichern:

function checkCookie() { var username=getCookie("username"); if (username!="") { alert("Willkommen zurück " + username); } else { username = prompt("Bitte geben Sie Ihren Namen ein:",""); if (username!="" && username!=null) { setCookie("username",username,365); } } }

Vollständiges Beispiel

Beispiel

function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires; } function getCookie(cname){ var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) { return c.substring(name.length,c.length); } } return ""; } function checkCookie(){ var user=getCookie("username"); if (user!=""){ alert("Willkommen" + user + "Besuchen Sie uns wieder"); } else { user = prompt("Bitte geben Sie Ihren Namen ein:",""); if (user!="" && user!=null){ setCookie("username",user,30); } } }

Selbst ausprobieren »

Das folgende Beispiel führt die Funktion checkCookie() aus, wenn die Seite geladen wird.

Andere Erweiterungen