SELFHTML: JavaScript / Anwendungsbeispiele / Persönliche Seitenbesuche zählen mit Cookies
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie mit Hilfe von JavaScript dem Anwender beim Aufruf einer Seite mitteilen können, wie oft er schon auf der Seite war. Realisiert mit Hilfe von Cookies.
Keywords: SELFHTML, JavaScript, Zähler, Counter, Cookies, document.cookie
Date: 2005-08-22T21:21:39+02:00

| # Persönliche Seitenbesuche zählen mit Cookies
| Hinweise zu diesem Beispiel Quelltext mit Erläuterungen Anzeigebeispiel: So sieht's aus

## Hinweise zu diesem Beispiel

Cookies (Kekse) sind ein nicht unumstrittenes Feature, das Netscape in JavaScript eingebaut hat. 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 WWW-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.

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 mit CGI. Das hier beschriebene Script zählt nur, wie oft ein bestimmter Anwender eine bestimmte Seite besucht.

## Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei. Der Zähler gilt für diese eine Datei.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html>
    <head>
    <title>Pers&ouml;nliche Seitenbesuche z&auml;hlen mit Cookies</title>
    <script type="text/javascript">
    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);
      Zaehler = Zaehler + 1;
      WertSetzen("Zaehler", Zaehler, Verfallszeit);
      return (Zaehler);
    }
    </script>
    </head>
    <body>

    <h1>Eine Seite, die etwas über Sie wei&szlig;...</h1>

    <script type="text/javascript">
    var x = Zaehlerstand();
    document.write("<p>Dies ist Ihr <b>" + x + ".<\/b> Besuch auf dieser Seite!<\/p>");
    </script>

    <p>Benutzen Sie doch mal die Reload-Funktion Ihres Browsers ...</p>

    </body>
    </html>

### Erläuterung:

#### 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 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. Dort ist im `body`-Bereich ein weiterer JavaScript-Bereich notiert. Innerhalb davon wird die Funktion `Zaehlerstand()` aufgerufen, und ihr Rückgabewert, also der aktuelle Zähler, wird in der Variablen `x` gespeichert. Anschließend wird mit `document.write` HTML-Code ins Anzeigefenster des Browsers geschrieben, wobei die Variable `x` mit ausgegeben wird.

### Beachten Sie:

Opera bis Version 6 und Safari 1.0 erlauben kein Setzen von Cookies im Protokoll `file://`.

| Formulareingaben überprüfen
| Monatskalender

© 2007 Impressum