JavaScript/Tutorials/cookies

Cookies erlauben einem JavaScript-Programm, Daten auf der Festplatte des Anwenders zu speichern.

Dies geschieht jedoch in kontrollierter Form. Ein "Ausspionieren" der Anwenderfestplatte ist dabei ebenso wenig möglich wie das Platzieren von ausführbarem Code, also etwa Viren. Denn wenn Sie in einem JavaScript einen Cookie schreiben, können Sie nicht angeben, wohin der Cookie beim Anwender gespeichert wird. Das kontrolliert der Browser des Anwenders. Außerdem können Cookies keine unkontrollierten Datenmengen auf den Anwenderrechner schreiben, sondern nur eine begrenzte Anzahl von Zeilen. Jede solcher Zeilen definiert eine Variable und weist dieser Variablen einen Wert zu. Ein Cookie lässt sich also mit einem Eintrag in einer Konfigurationsdatei vergleichen – mit dem Unterschied, dass der Cookie keine Konfigurationsdaten des Anwenderrechners ansprechen kann.

Anwendungsbeispiel

Durch die Möglichkeit, Daten zu speichern, werden jedoch viele neue Anwendungsbereiche für JavaScript möglich. So auch das hier beschriebene Beispiel. Denn um zeitlich auseinanderliegende Seitenbesuche zu zählen, muss man die Anzahl der bisherigen Seitenbesuche irgendwo fest speichern, beim nächsten Seitenbesuch wieder auslesen, den Zähler um 1 erhöhen und den neuen Wert wieder speichern. Genau das tut das hier beschriebene Beispiel.

Beachten Sie: Das Zählen von persönlichen Seitenbesuchen ist etwas anderes als das Zählen aller Seitenbesuche. Um alle Zugriffe auf eine Seite zu verwalten, muss das Programm seine Zählerstände auf dem Server-Rechner ablegen. Deshalb funktioniert ein klassischer "Counter" nur serverseitig. Das hier beschriebene Script zählt nur, wie oft ein bestimmter Anwender eine bestimmte Seite besucht.

Beispiel ansehen …

function init() {
  var besuch = zaehlerstand();
  var ausgabe = document.getElementById('info');
  ausgabe.innerHTML = besuch;
}
function wertHolen () {
  var Wert = "";
  if (document.cookie) {
    var Wertstart = document.cookie.indexOf("=") + 1;
    var Wertende = document.cookie.indexOf(";");
    if (Wertende == -1) {
      Wertende = document.cookie.length;
	}
	Wert = document.cookie.substring(Wertstart, Wertende);
  }
  return Wert;
}

function wertSetzen (Bezeichner, Wert, Verfall) {
  var jetzt = new Date();
  var Auszeit = new Date(jetzt.getTime() + Verfall);
  document.cookie = Bezeichner + "=" + Wert + "; expires=" + Auszeit.toGMTString() + ";";
}

function zaehlerstand () {
  var Verfallszeit = 1000 * 60 * 60 * 24 * 365;
  var Anzahl = wertHolen();
  var Zaehler = 0;
  if (Anzahl != "") {
    Zaehler = parseInt(Anzahl) || 0;
  }
  Zaehler = Zaehler + 1;
  wertSetzen("Zaehler", Zaehler, Verfallszeit);
  return (Zaehler);
}

Cookie lesen und gespeicherten Wert ermitteln

Die Funktion wertHolen(), die im Beispiel definiert ist, ist allgemein geschrieben. Sie können diese Funktion nutzen, um einen Cookie auszulesen. Wenn die Datei schon einmal einen Cookie geschrieben hat, wird dessen Wert ermittelt und zurückgegeben. Wenn noch kein Cookie existiert, wird eine leere Zeichenkette "" zurückgegeben.

Mit der Abfrage if(document.cookie) ermittelt die Funktion, ob bereits ein Cookie vorhanden ist. Wenn ja, wird dessen Wert ermittelt. Ein Cookie besteht normalerweise aus einem Bezeichner und einem Wert, zum Beispiel: Zaehler=4

Dabei ist Zaehler der Bezeichner und 4 der Wert, der diesem Bezeichner zugewiesen ist. Die Funktion WertHolen() holt sich den Wert, indem sie mit indexOf()-Befehlen den Anfang und das Ende des Wertes innerhalb des gespeicherten Cookies ermittelt. Diesen Wert weist sie der Variablen Wert zu. Die Variable Wert wird am Ende der Funktion zurückgegeben.

Cookie schreiben und Wert setzen

Die Funktion wertSetzen(), die im Beispiel definiert ist, ist ebenfalls allgemein geschrieben. Diese Funktion erwartet drei Parameter:

• Bezeichner ist das Element vor dem Istgleichzeichen, zum Beispiel Zaehler.
• Wert ist der Wert, der dem Bezeichner zugewiesen und mit gespeichert werden soll.
• Verfall ist eine Zahl, die als Anzahl Millisekunden interpretiert wird. Jeder Cookie, der über die aktuelle Browser-Sitzung hinaus gespeichert bleiben soll, muss eine Angabe dazu enthalten, wann der Browser den Cookie löschen soll. Das soll verhindern, das Cookies "ewig" gespeichert bleiben. Der Verfallszeitpunkt des Cookies muss in Form des GMT-Zeitformats angegeben werden. Darum brauchen Sie sich aber nicht zu kümmern, da die Funktion wertSetzen() dies automatisch erledigt. Die Funktion ermittelt zu diesem Zweck die aktuelle Zeit (var jetzt = new Date();). In der Variablen Auszeit errechnet sie einen zukünftigen Zeitpunkt aus dem übergebenen Parameter Verfall und dem ermittelten aktuellen Zeitpunkt.

Mit der Anweisung, die mit document.cookie beginnt, wird der Cookie geschrieben.

Übergeordnete Funktion zum Verwalten des Cookies

Die beiden allgemeinen Funktionen wertHolen() und wertSetzen() benötigen nun noch ein paar allgemeine Anweisungen, die den Cookie verwalten. Dies geschieht im Beispiel in der Funktion Zaehlerstand(). Zunächst definiert diese Funktion einen Verfallswert, der später beim Schreiben des Cookies an die Funktion WertSetzen() übergeben wird. Mit dem Rechenausdruck 1000*60*60*24*365 wird die Millisekundenzahl eines Jahres ermittelt. Der Cookie soll also ein Jahr lang gespeichert werden.

Um die persönlichen Seitenbesuche des Anwenders zu verwalten, muss die Funktion Zaehlerstand() folgendes tun: sie muss erstens den aktuellen Zählerstand ermitteln, zweitens den Zähler um 1 erhöhen und drittens den neuen Zählerstand wieder speichern. Wenn noch kein Cookie vorhanden ist, d. h. wenn der Anwender die Seite zum ersten Mal besucht, muss der Zähler auf 1 gesetzt und gespeichert werden.

Zuerst ruft die Funktion Zaehlerstand() deshalb die Funktion wertHolen() auf, um den aktuellen Zählerstand zu ermitteln. Der Rückgabewert von wertHolen() wird in der Variablen Anzahl gespeichert. Wenn noch kein Cookie vorhanden ist, steht in Anzahl anschließend eine leere Zeichenkette "". Ist ein Wert vorhanden, enthält Anzahl den Wert in Form einer Zeichenkette. Da man mit Zeichenketten nicht rechnen kann, zum Hochzählen des Zählers jedoch ein numerischer Wert benötigt wird, wird im Beispiel noch eine numerische Variable namens Zaehler definiert. Mit der parseInt()-Methode wird dieser Variablen der Wert von Anzahl als Zahl zugewiesen.

Wenn ein Cookie vorhanden ist, wird der Zähler um 1 erhöht. Anschließend wird die Funktion wertSetzen() aufgerufen, die den Cookie speichert. Als Bezeichner wird das Wort "Zaehler" übergeben, als Wert der Inhalt der Variablen Zaehler, und als Verfallszeitpunkt der Inhalt der Variablen Verfallszeit.

Wenn kein Cookie vorhanden ist, wird die Funktion wertSetzen() genauso aufgerufen. Vorher wird jedoch der Inhalt der Variablen Zaehler auf 1 gesetzt.

Am Ende gibt die Funktion Zaehlerstand() mit Hilfe von return() zurück. Damit kann diese Funktion beispielsweise an anderer Stelle für eine Ausgabe innerhalb der Seite aufgerufen werden, so wie im Beispiel. Sobald die Seite neu geladen wird, wird der DOMContentLoaded-Event gefeuert. An den Event wurde mit addEventListener die Funktion init angehängt. Diese ruft die Funktion Zaehlerstand() auf und gibt dann den Rückabewert aus.

Siehe auch

• Cookie: Übersichtsseite mit Erklärung und vielen Links
• JavaScript/Tutorials/Wertübergabe zwischen verschiedenen HTML-Dokumenten
• JavaScript/DOM/Document/cookie
• JavaScript/Web Storage