SELFHTML/Quickbar JavaScript Anwendungsbeispiele

| ## Persönliche Seitenbesuche zählen mit Cookies
| Persönliche Seitenbesuche zählen mit Cookies - das Beispiel

## Persönliche Seitenbesuche zählen mit Cookies - das Beispiel

Anzeigebeispiel: So sieht's aus

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 Plazieren 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äßt sich also mit einem Eintrag in einer Konfigurationsdatei vergleichen - mit dem Unterschied, daß 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, muß 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, muß 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.

Der MS Internet Explorer interpretiert Cookies nur vollständig, wenn die HTML-Datei, die Cookies liest und schreibt, vom Browser über das HTTP-Protokoll aufgerufen wird.

Hinweis: Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. 1*. Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

### Beispiel:

     <html>
     <head>
     <title>Seitentitel</title>
     <script language="JavaScript">
      <!--
      1* function WertHolen()
      {
       var Wert = "";
       if(document.cookie)
       {
        Wertstart = document.cookie.indexOf("=") + 1;
        Wertende = document.cookie.indexOf(";");
        if(Wertende == -1) Wertende = document.cookie.length;
        Wert = document.cookie.substring(Wertstart,Wertende);
       }
       return Wert;
      }

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

      3* function Zaehlerstand()
      {
       var Verfallszeit = 1000*60*60*24*365;
       var Anzahl = WertHolen();
       var Zaehler = 0;
       if(Anzahl != "") Zaehler = parseInt(Anzahl);
       if(document.cookie)
       {
        Zaehler = Zaehler + 1;
        WertSetzen("Zaehler",Zaehler,Verfallszeit);
       }
       else
       {
        Zaehler = 1;
        WertSetzen("Zaehler",Zaehler,Verfallszeit);
       }
      alert("Dies ist Ihr " + Zaehler + ". Besuch auf dieser Seite!");
      }
      //-->
     </script>
     </head>
     <body onLoad="Zaehlerstand()">
     Inhalt der Datei
     </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, muß eine Angabe dazu enthalten, wann der Browser den Cookie löschen soll. Das soll verhindern, das Cookies "ewig" gespeichert bleiben. Der Verfallszeitpunkt des Cookies muß 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, muß die Funktion `Zaehlerstand()` folgendes tun: sie muß 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, muß 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 `alert()` den aktuellen Zählerstand in einem Meldungsfenster aus.

Alle Anweisungen des Beispiel-Scripts stehen innerhalb von Funktionen. Damit diese Anweisungen beim Einlesen der Datei überhaupt ausgeführt werden, muß die Funktion `Zaehlerstand()` explizit aufgerufen werden. Das passiert im Beispiel im einleitenden `<body>`-Tag mit Hilfe des Event-Handlers `onLoad=`.

weiter: | Formulareingaben überprüfen
zurück: | Monatskalender

SELFHTML/Quickbar JavaScript Anwendungsbeispiele

© 1998 Stefan Münz, muenz@csi.com