Informatik :: JavaScript :: Cookies programmieren und auswerten

Cookies programmieren und auswerten

Allgemeines | Cookie schreiben | Cookie auswerten
Aufgaben | Aufgabe 1 | Aufgabe 2 | Aufgabe 3


Allgemeines

Zum Thema Cookies (dt. Kekse) geistern die verschiedensten mystischen Vorstellungen in der Surfergemeinde umher:
- Daten von deiner Festplatte könnten ausspioniert werden.
- Cookies sind ein großes Sicherheitsrisiko und ein Einfallstor für Viren.

Alles Blödsinn! Hast du Angst vor'm Krümelmonster? Nein? Dann brauchst du auch keine Angst vor Cookies zu haben.

Cookies sind nichts weiter als Textdateien, mit denen eine Webseite Infos auf deinem Rechner speichert.
Ich wiederhole: Eine Webseite speichert auf deinem Rechner, dass du sie besucht hast.
Ein Web-Shop z.B. merkt sich, welche Produkte noch in deinem Warenkorb stecken.
Das Ganze wird bei Bedarf wieder ausgelesen.

Der IE legt Cookies in der Regel unter C:\Windows\Cookies ab,

der Netscape-Browser wählt den Pfad C:\Programme\Netscape\Users\Benutzername.

Die Textdateien lagern also auf deiner Festplatte - fein. Sie können auch nur von der Webseite wieder ausgelesen werden, die sie gesetzt hat. Oder, um genau zu sein, von HTML-Dokumenten aus dem gleichen Ordner bzw. HTML-Seiten aus Unterordnern. Aber im Normalfall nicht von einer anderen Domäne!
Cookies sind eine Privatsache zwischen der Webseite, deinem Browser und dir.

Alle Cookies eines Clients lassen sich ganz einfach im Browser verwalten.
Bei Mozilla Firefox findet man z.B. im Menü Extras das Dialogfenster Einstellungen. Im Fenster Einstellungen verwendet man die Registerkarte Datenschutz. Der Button Cookies anzeigen ... öffnet ein weiteres Dialogfenster, in dem sich alle Cookies verwalten lassen.

Beispiel für die Arbeitsweise von Cookies:
Benutzer B wählt in seinem Webbrowser (= Client C) den Server S an. Bevor B Zugriff auf die Daten von S bekommt, muss er sich über ein HTML-Formular identifizieren. B füllt das Formular aus und schickt es durch Submit an den Server S. Dieser wertet die Daten aus und sendet sie ergänzt um eine Serverinformation in Form eines Cookies an den Client C zurück. Dort wird der Cookie auf der lokalen Festplatte gespeichert. Besucht nun Benutzer B den Server erneut, so prüft der Browser, ob er schon einmal einen Cookie vom angewählten Server S erhalten hat. Da dies der Fall ist, übermittelt er ihn automatisch an den Server S. Dieser wertet den Cookie aus, erkennt, dass B sich bereits zu einem früheren Zeitpunkt identifiziert hat, und gewährt dem Benutzer B sofort Zugriff.

Im wird beim erstmaligen Laden der HTML-Datei ein Cookie erzeugt.
Die auf dem System des Nutzers erzeugte Textdatei hat hier z.B. folgenden Inhalt:
   
Wird die gleiche HTML-Datei vom gleichen Nutzer erneut geladen, wird die zuvor erzeugte Textdatei ausgewertet. Hier wird untersucht, ob der Cookiename dagewesen den Cookiewert ja hat. Ist dies der Fall, wird der Nutzer entsprechend begrüßt.

Im muss ein Formular ausgefüllt werden. Die Formulardaten werden in einer Textdatei gespeichert.
Diese Cookies werden beim Öffnen von ausgewertet.

Seitenanfang

Cookie schreiben

Ein Cookie ist eine Eigenschaft des document-Objektes. Da jedes Cookie ein String ist, lassen sich darauf alle Eigenschaften des String-Objektes anwenden, doch dazu später.
Ein Cookie kann aus fünf Parametern bestehen, wobei nur die ersten beiden Pflicht sind.

Parameter Beschreibung
NAME=WERT NAME ist der Name des Cookies, WERT stellt die zu speichernde Information dar
EXPIRES=DatumimGMTFormat Das Datum gibt das Ablaufdatum des Cookies an.
Es muss zwingend im GMT-Format angegeben werden.
Dazu verwendet man datum.toGMTString()
DOMAIN=Domainname Domainname spezifiziert die Domäne, für die der Cookie gültig ist.
PATH=Verzeichnis-Pfad Verzeichnis-Pfad gibt innerhalb der Domän an, für welche Verzeichnisse der Cookie zu verwenden ist.
SECURE Legt fest, dass ein Cookie nur über einen sicheren (d.h. verschlüsselten) Kanal übertragen werden darf.

Die Parameter werden automatisch durch Semikolons getrennt gespeichert.

Beispiele:

document.cookie="dagewesen=ja; expires=" + datum.toGMTString()
document.cookie="name=" + document.forms[0].elements[2].value+ "; expires=" + datum.toGMTString()

Damit das Cookie eine "Lebensdauergarantie" bekommt, benötigt man den Parameter expires und übergibt ihm das Verfallsdatum im speziellen Greenwich Mean Time (GMT)-Format. Diese Angabe und dieses Format sind Pflicht.
Um ein Datum in das GMT-Format umzuwandeln, nutzt man die Methode toGMTString() angewandt auf das Date-Objekt.

Beispiel:

datum=new Date; //datum wird zur neuen Instanz des Date-Objektes
datum.setMonth(datum.getMonth()+3); //Monat wird um 3 erhöht -> in 3 Monaten läuft Cookie ab
document.cookie="dagewesen=ja; expires=" + datum.toGMTString(); //Cookie schreiben

Alle Cookies werden in einer Textdatei gespeichert. Diese kann maximal 300 Cookies enthalten. Jeder einzelne Cookie darf höchstens 4kB groß sein. Pro Domain ist die Anzahl der Cookies auf 20 begrenzt.

Im wird ein Cookie geschrieben, was den Namen des Nutzers enthält.

Seitenanfang

Cookie auswerten

Um einen Cookie auszuwerten, muss der Cookiewert gelesen werden. Dies geschieht durch das Aufsplitten des Cookies, der ja ein String ist. Dazu benötigt man die Methode split("Zeichen") (siehe Methoden des String-Objektes). Der Cookiewert steht nach einem Gleichheitszeichen.

Nach dem Aufsplitten des Cookies entsteht ein Array (hier: keks), dessen erstes Element (hier: keks[0]) den Cookienamen und dessen zweites Element (hier: keks[1]) den Cookiewert enthält.
Daher notiert man:

keks=document.cookie.split("=");
keksname=keks[0];
kekswert=keks[1];
document.write(kekswert);

Im wird der Cookie aus Beispiel 3a ausgewertet, was den Namen des Nutzers enthält.

Enthält der Cookie mehrere Informationen, so muss man zunächst den Cookie in die verschiedenen Informationen aufsplitten, die jeweils durch ein Semikolon voneinander getrennt sind:

keks=document.cookie.split(";");

Es entsteht ein Array (hier: keks), dessen Elemente (keks[0], keks[1], ...) die einzelnen Informationen enthalten. Diese sind nun wiederum in den Cookienamen und den Cookiewert aufzusplitten:

for (i=0;i<keks.length;i++)
{
    keksname=keks[i].split("=")[0];
    kekswert=keks[i].split("=")[1];
}

Seitenanfang

Aufgaben

Erstelle zunächst eine HTML-Datei, die 3 Button mit der Aufschrift "Aufgabe 1", "Aufgabe 2" bzw. "Aufgabe 3" enthält.
Bei Klick auf einen Button soll ein neues Fenster mit der Lösung der entsprechenden Aufgabe geöffnet werden.

Aufgabe 1:

Erstelle eine HTML-Datei, die

  1. prüft, ob der Nutzer innerhalb des letzten Monats schon einmal die Seite geladen hat.
    Falls ja, soll ausgegeben werden: "Na, schon wieder da?"
    Falls nein, soll ausgegeben werden: "Na endlich bist auch du da!"
  2. ein entsprechendes Cookie setzt.

Aufgabe 2:

Erstelle eine HTML-Datei, die

  1. ein Formular zur Eingabe von Vorname, Name und Geburtsdatum, einen Button "Daten speichern" (zum Speichern des Cookies) und einen Button "Fenster schließen" enthält,
  2. prüft, ob der Nutzer schon einmal die Seite geladen hat.
    Falls ja, soll ausgegeben werden: "Hallo Vorname, jetzt bist du Alter Jahre alt."

Hinweise:

Aufgabe 3:

Seitenanfang