Anzeige
Tutorialbeschreibung

Javascript und Ajax - Cookies

Javascript und Ajax - Cookies

In diesem Kapitel geht es um Cookies. Viele kennen diese schon von anderen Programmiersprachen und schätzen sie. In Fachkreisen werden sie auch liebevoll "Kekse" genannt.


Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Kapitel 12 Cookies

Cookies sind böse. Man kann damit den Benutzer ausspionieren, seine E–Mail-Adresse und alle seine Passwörter herausbekommen. Über Cookies erhält eine Webseite Lese- und Schreibzugriff auf die lokale Festplatte des Benutzers. Cookies sind primär ein Ärgernis, und sie sollten permanent ausgeschaltet werden. Es gibt keine nützliche Anwendung. Hat man viele Cookies, so hat man automatisch auch viele kleine Dateien auf der Festplatte, und diese wird auf diese Weise zugemüllt, wertvoller Speicherplatz geht verloren. Andererseits sind Cookies eigentlich richtige Programme, Spionageprogramme, um genau zu sein. Der Papst ist evangelisch, und der Bär wohnt nicht im Wald.

Der letzte Satz ist frei erfunden, die Aussagen zuvor stammen jedoch allesamt aus der Presse, teilweise sogar aus der so genannten Fachpresse. An einigen der Aussagen ist entfernt etwas Wahres dran, manche sind bedingt gültig. Man kann jedoch Cookies nicht global als böse abkanzeln. In diesem Kapitel wird beschrieben, was ein Cookie wirklich ist, welche Möglichkeiten und welche Einschränkungen es gibt und wie man Cookies mit JavaScript erstellen und nutzen kann.


12.1 Was ist ein Cookie? 
topBilder
topBilder

HTTP wird als stateless protocol (zustandsloses Protokoll) bezeichnet: Die Verbindung zum Server wird geöffnet, Browser und Server senden Daten (der Browser eine HTTP-Anfrage, der Server ein Dokument, eine Datei o.  Ä.), und dann wird die Verbindung wieder gekappt. Es ist somit praktisch unmöglich, einen Benutzer auf mehreren Seiten einer Website zu verfolgen. Sieht man von einer Logdatei-Analyse ab, ist es bei mehreren parallelen Zugriffen praktisch unmöglich festzustellen, welche Anfrage von welchem Benutzer kam.

Dies ist nicht nur ein herber Schlag für eine ganze Berufsgruppe, die Marketing-Leute, denn auch für andere Bereiche ist es interessant, den Benutzer zu kennen. In einem virtuellen Kaufhaus muss auf jeder Seite der Kunde bekannt sein, oder zumindest muss die Applikation wissen, welche Artikel dieser Kunde in seinem Warenkorb hat.

Cookies sind manchmal das geringste Übel. Ein Cookie ist prinzipiell eine Textinformation, die auf der Festplatte des Benutzers gespeichert wird. Bei jeder HTTP-Anfrage werden bestimmte Cookies des Benutzers mitgeschickt (dazu später mehr), und bei der HTTP-Antwort des Webservers können ebenfalls Cookies mitgeschickt werden. Der Netscape Navigator speichert Cookies zeilenweise in der Datei cookies.txt im jeweiligen Benutzerverzeichnis, während die Datei beim Macintosh MagicCookie heißt. Der Microsoft Internet Explorer verwendet für jeden einzelnen Cookie eine einzelne Textdatei.

Netscape selbst hat noch zu Zeiten der Version 1.1 Cookies vorgeschlagen (implementiert wurden sie jedoch erst in Version 2.0). Die Spezifikation, damals wie heute gleich, finden Sie unter http://wp.netscape.com/newsref/std/cookie_spec.html. Cookies werden vom Internet Explorer ab Version 3 unterstützt – mit JavaScript im lokalen Gebrauch jedoch erst ab Version 4 (auf einem Webserver schon ab Version 3). Es gibt einige, von Netscape auferlegte Einschränkungen bei Cookies, die zum Großteil auch nur für den Netscape Navigator gelten. Um die Browserkompatibilität zu wahren, sollte man sich jedoch generell daran halten. Ein Cookie darf höchstens 4 kByte an Daten enthalten (in der Realität sind es jedoch nur etwa 2000 Zeichen), und der Browser kann nur 300 Cookies verwalten, was aber neuere Browser nicht immer allzu ernst nehmen. Sobald der Benutzer den 301. Cookie erhält, wird dafür ein anderer (in der Regel der älteste) gelöscht. Cookies werden, wie bereits erwähnt, vom Browser gespeichert und verwaltet; wenn Sie mehrere Browser benutzen, speichert jeder seine eigenen Cookies, Sie können Cookies also nicht browser-übergreifend verwenden.

 

12.2 Wie sieht ein Cookie aus? 
topBilder
topBilder

Ein Cookie erinnert an den Versand eines Formulars via GET. Jeder Cookie hat als Hauptkomponente (mindestens) ein Name-Wert-Paar. Auch hier gelten wieder die üblichen Regeln der URL-Codierung, also heißt es Autor=Christian+Wenz oder Autor=Christian%20Wenz, weil das Plus-Zeichen oder hexadezimal 20 (dezimal 32) das Leerzeichen ersetzt. Außerdem hat ein Cookie noch die folgenden weiteren, optionalen Parameter in Form von Name-Wert-Paaren:

gpBilder
 
domain: Dieser Parameter bezeichnet die Domain des Servers, der den Cookie lesen darf. Standardmäßig ist das der Server-Anteil der URL der Seite, die den Cookie setzt. Dieses Attribut wird jedoch unter bestimmten Umständen anders gesetzt. Angenommen, eine Firma hat mehrere Webserver, server1.firma.de, server2.firma.de und www.firma.de. Von jedem dieser Server aus soll ein Cookie gelesen werden können. Standardmäßig wäre der domain-Wert des Cookies, wenn er auf www. firma.de/cookie.htm gesetzt worden ist, www.firma.de; als direkte Konsequenz hätten server1.firma.de und server2.firma.de keinen Zugriff auf diesen Cookie. Um dies zu vermeiden, kann das domain-Attribut gesetzt werden. Es würde in diesem Fall auf .firma.de gesetzt, wodurch jeder Server, dessen Name auf .firma.de endet, den Cookie lesen kann. Ein Domainname muss hier mindestens zwei Punkte enthalten, deswegen steht ein Punkt vor firma.de. Einige Leute sind auf die Idee gekommen, einfach die Cookies mehrerer (unterschiedlicher) Seiten auf einem zentralen Cookie-Server zu speichern. Beim Netscape Navigator gibt es eine Option, die dies vereitelt (Bearbeiten N Einstellungen N Erweitert N Nur an den ursprünglichen Server zurückgesendete Cookies akzeptieren). Pro Domain werden übrigens nur 20 Cookies akzeptiert, danach werden alte Cookies gelöscht bzw. überschrieben.
gpBilder
 
expires: Jeder Cookie hat ein Ablaufdatum, nach dem er gelöscht wird. Manche Seiten setzen dieses Datum auf das Jahr 2037 oder später, und so lange wird die Festplatte des Benutzers sicher nicht halten – es sind also (beinahe) unendlich lange gültige Cookies möglich. Eine Sicherheit, dass der Cookie tatsächlich so lange hält, hat man indes nicht, da Cookies manuell oder durch Überschreitung der 300er-Grenze vom Netscape Navigator gelöscht werden können. Wird kein Ablaufdatum angegeben, so wird der Cookie gelöscht, sobald der Browser beendet wird. Man spricht hier von einem Session-Cookie oder einem temporären Cookie; Cookies mit gesetztem Ablaufdatum nennt man permanente Cookies. Das Ablaufdatum sollte im GMT-Format angegeben werden; in JavaScript ist das ein Fall für die toGMTString()-Methode.
gpBilder
 
path: Wie oben ausgeführt wurde, kann ein Cookie von demjenigen Server ausgelesen werden, der in der domain-Eigenschaft angegeben ist. Wenn wichtige Daten in Cookies gespeichert werden, gibt es jedoch unter Umständen ein Problem. Wenn Sie bei Ihrem ISP eine Website hosten lassen, haben Sie oft eine URL der Bauart mitglied.isp.de/mitgliedsname. Die Seite des Konkurrenten, die auch bei diesem ISP gehostet wird, hat die URL mitglied.isp.de/nocheinmitglied. Die Domain ist jedoch in beiden Fällen mitglied.isp.de – und damit kann die Website Ihres Konkurrenten die Cookies lesen, die Ihre Seite bei dem Benutzer gesetzt hat (wenn der Benutzer zuerst Ihre Seiten und dann die der Konkurrenz besucht). Aus diesem Grund kann man noch einen Pfad setzen. Nur Webseiten, die in diesem Pfad auf dem entsprechenden Server liegen (Unterverzeichnisse eingeschlossen), können den Cookie lesen. In diesem Fall sollten Sie also den Pfad Ihrer Cookies auf /mitgliedsname setzen, um böse Überraschungen zu vermeiden. Ein weiteres Beispiel: Der Standardwert von path ist das Verzeichnis der Datei auf dem Webserver, die den Cookie setzt. Wenn Sie den Cookie aber auf jeder anderen Seite, auch in anderen Verzeichnissen, lesen wollen, sollten Sie den Wert von path auf / setzen.
gpBilder
 
secure: Diese Eigenschaft muss nur angegeben werden; hier liegt kein Name-Wert-Paar vor. Ist die Eigenschaft gesetzt, so darf der Cookie nur gelesen werden, wenn man über eine HTTPS-Verbindung, also über eine »sichere«, verschlüsselte Verbindung mit der Webseite verbunden ist.

Die Parameter bzw. Name-Wert-Paare werden durch Semikolon und Leerzeichen voneinander getrennt. Ein typischer Cookie sieht also folgendermaßen aus:

Autor=Christian+Wenz; domain=.galileo-press.de; expires=Sun, 01-Oct-2006 12:00:00 GMT; path=/; secure

Der Name des Cookies ist gleichzeitig der Identifikator, es darf also nicht zwei Cookies mit demselben Namen geben. Wird ein Cookie gesetzt, den es (vom Namen her) schon gibt, wird der alte durch die neuen Daten überschrieben. Nur wenn der Pfad unterschiedlich ist, kann man denselben Namen öfter verwenden. Dieses Vorgehen ist jedoch nicht empfehlenswert – und auch mit JavaScript schwer zu fassen. Das Setzen ist einfach, aber das Lesen gestaltet sich schwierig.

 

12.3 Cookies mit JavaScript 
topBilder

Cookies werden mit JavaScript in der Eigenschaft cookie des document-Objekts gespeichert, und zwar als Zeichenkette. Das impliziert, dass man auf Cookies nicht wie auf Objekte mit Eigenschaften und Methoden zugreifen kann. Beim Setzen des Cookies ist das kein weiteres Problem, da denkt der JavaScript-Interpreter mit. Wenn der Wert von document. cookie beispielsweise

"Autor=Christian+Wenz"

ist und der Befehl

document.cookie = "Verlag=Galileo";

ausgeführt wird, lautet der Wert von document.cookie danach folgendermaßen:

Autor=Christian+Wenz; Verlag=Galileo

Der JavaScript-Interpreter passt den Wert des Cookies also automatisch an. Das gilt auch, wenn der Wert eines Cookies geändert wird. Nach der Ausführung des Befehls

document.cookie = "Verlag=Galileo-Press";

wird der Wert von document.cookie in

Autor=Christian+Wenz; Verlag=Galileo-Press

geändert.

Der Internet Explorer unterstützt auch Cookies, die nur vom Webserver gesetzt und ausgelesen werden können, jedoch nicht von JavaScript. Hinter diesen Cookies steht die Idee, kein Cookie-Auslesen per XSS zu ermöglichen (siehe Kapitel 30).


12.3.1 Cookies setzen  

Es bietet sich an, zum Setzen eines Cookies eine Funktion zu schreiben, an die die einzelnen Parameter des Cookies als Funktionsparameter übergeben werden. Im Folgenden ist so eine Funktion aufgeführt: Es wird überprüft, ob der jeweilige Parameter den Wert null hat (also nicht angegeben worden ist), und dementsprechend wird der Cookie angepasst.

function setCookie(name, wert, domain, expires, path, secure){
   var cook = name + "=" + unescape(wert);
   cook += (domain) ? "; domain=" + domain : "";
   cook += (expires) ? "; expires=" + expires : "";
   cook += (path) ? "; path=" + path : "";

   cook += (secure) ? "; secure" : "";
   document.cookie = cook;
}

Der Beispielaufruf

setCookie("Autor", "Christian Wenz", null, (new Date()).getTime() + 1000*3600*24).toGMTString())

setzt einen Cookie Autor=Christian+Wenz, der einen Tag lang gültig ist (1000 Millisekunden pro Sekunde, 3600 Sekunden pro Stunde, 24 Stunden pro Tag).


12.3.2 Cookies löschen  

Das Löschen von Cookies ist auch sehr bequem. Man versetzt hierbei das Ablaufdatum in die Vergangenheit. Damit wird der Cookie danach sofort ungültig und gelöscht. Zwar könnte man das aktuelle Datum nehmen und einen Tag oder sogar nur eine Sekunde davon abziehen, aber in der Regel setzt man das Ablaufdatum auf die frühestmögliche Zeit unter JavaScript, den 1. Januar 1970, eine Sekunde nach Mitternacht. In GMT-Schreibweise sieht das so aus:

Thu, 01-Jan-70 00:00:01 GMT

Beim Schreiben einer Funktion müssen Sie die Parameter für die Domain und den Pfad ebenfalls mit angeben können, um gegebenenfalls den richtigen Cookie zu löschen:

function eraseCookie(name, domain, path) {
   var cook="name=; expires=Thu, 01-Jan-70 00:00:01 GMT";
   cook += (domain) ? "domain=" + domain : "";
   cook += (path) ? "path=" + path : "";
   document.cookie = cook;
}


12.3.3 Cookies lesen  

Kommen wir zum schwierigsten Teil: den Wert eines Cookies wieder zu lesen. Wie ich bereits zuvor angedeutet habe, wird der Sonderfall zweier gleichnamiger Cookies mit unterschiedlicher Pfadangabe hier nicht berücksichtigt, weil der Aufwand unverhältnismäßig steigt. Stattdessen wird der zu schreibenden Funktion, die den Wert eines Cookies zurückgeben soll, nur der Name des Cookies übergeben, sonst nichts. Der erste Cookie, der dann gefunden wird, wird angezeigt.

Bei dieser Aufgabenstellung sieht man erst den Nachteil, dass man auf Cookies nicht als Objekte zugreifen kann. Der Wert des Cookies muss mit profanen Stringfunktionen herausgefunden werden. Das ist aber recht einfach: Zuerst wird nach der Zeichenkette "name=" gesucht, wobei name den Namen des Cookies angibt. Dahinter steht dann der Wert des Cookies. Sobald man auf ein Semikolon oder das Ende der Zeichenkette stößt, hat man den gesamten Wert und kann ihn (aus der URL-Schreibweise wieder zurückcodiert) zurückgeben.

function getCookie(name) {
   var i=0;  //Suchposition im Cookie
   var suche = name + "=";
   while (i<document.cookie.length) {
      if (document.cookie.substring(i, i + suche.length)
      == suche) {
         var ende = document.cookie.indexOf(";", i
         + suche.length);
         ende = (ende > –1) ? ende :
         document.cookie.length;
         var cook = document.cookie.substring(i
            + suche.length, ende);
         return unescape(cook);
      }
      i++;
   }
   return "";
}

Der zweite Parameter bei open() gibt die Position an, ab der gesucht werden soll. Wird kein zweiter Parameter angegeben (wie das bis dato bei allen Beispielen der Fall war), wird die Zeichenkette von Anfang an (also ab dem Zeichen mit der Position 0) durchsucht.


12.3.4 Cookie-Unterstützung überprüfen  

Aufgrund der eingangs angedeuteten Paranoia bezüglich Cookies haben viele Benutzer die Verwendung von Cookies abgeschaltet, oder sie lassen ein Warnfenster ausgeben, sobald ein Cookie vom Server (oder hier vom Browser selbst) geschickt wird.

Aus diesem Grund sollte man – zumindest am Anfang einer auf Cookies basierenden Applikation – prüfen, ob Cookies unterstützt werden. An vielen Stellen wurde vorgeschlagen, folgende Überprüfung vorzunehmen:

if (document.cookie) {
   // Cookie-Code
}

AbbildungBilder

Hier klicken, um das Bild zu Vergrößern

Abbildung 12.1     Die Cookie-Warnung eines Browsers

Prinzipiell ist der Ansatz gar nicht schlecht, aber oft wurde einfach behauptet, so werde überprüft, ob das Cookie-Objekt unterstützt wird.

Das ist leider völlig falsch, denn document.cookie ist kein Objekt, sondern einfach eine (sehr funktionsfähige, man denke an die Zuweisungen) Zeichenkette. Aus diesem Grund ist hier die if-Abfrage nur eine Abkürzung für folgenden Code:

if (document.cookie.length > 0){
   // Cookie-Code
}

Die erste Variante ist deswegen recht verbreitet, weil es vielleicht einmal Browser gibt, bei denen document.cookie gleich null ist – und dann führt ein Zugriff auf die Eigenschaft length zu einem Fehler.

Aber zurück zum Thema. Die obigen Abfragen überprüfen, ob document.cookie mindestens ein Zeichen enthält. Aus diesem Grund kann man mit obiger Methode also nicht testen, ob der Browser Cookies unterstützt, sondern nur, ob schon ein Cookie gesetzt worden ist. Sie müssen also einen Cookie setzen, um herauszufinden, ob der Browser ihn annimmt – also »Trial and Error«.

Eine Funktion, die überprüft, ob der Benutzer Cookies überhaupt akzeptiert, ist folgende:

function checkCookie() {
   setCookie("CookieTest", "OK");
   if (!getCookie("CookieTest")) {
      return false;
   } else {
      eraseCookie("CookieTest");
      return true;
   }
}

Hier sehen Sie einen Vorteil von JavaScript gegenüber serverseitigen Programmiersprachen: Bei der zuletzt dargestellten Vorgehensweise kann man nur übermittelte Cookies auslesen und dann neue Cookies setzen. Um aber nach dem Setzen zu überprüfen, ob das auch funktioniert hat, muss man eine neue Seite aufrufen bzw. ein neues Skript ausführen.

AbbildungBilder

Hier klicken, um das Bild zu Vergrößern

Abbildung 12.2     Ab Internet Explorer 5 gibt es detaillierte Einstellungsmöglichkeiten für Cookies – in anderen Browsern schon länger.

Diese Funktion sollten Sie jedoch nicht allzu oft ausführen. Viele Benutzer lassen sich einfach eine Warnmeldung anzeigen, um beispielsweise zu sehen, was in dem Cookie steht. Auf vielen Seiten benötigen Sie zwar beispielsweise den Cookie der Site selbst (beispielsweise Ihre Kundennummer), nicht aber den Cookie des Werbebanners auf derselben Site. Wenn Sie nun diese Funktion auf jeder Seite ausprobieren, ärgern sich die Benutzer über die vielen Warnmeldungen.

In diesem Zusammenhang ein kleiner Hinweis: Paranoia hin oder her, die Spionagegefahr durch temporäre Cookies ist wirklich gering. Außerdem benötigt beispielsweise Hotmail unbedingt temporäre Cookies, um zu funktionieren (Yahoo! Mail erforderte zeitweise sogar permanente Cookies, inzwischen benötigt man nur noch temporäre Cookies). Der Internet Explorer 5 sowie seine Nachfolgerversionen unterscheiden zwischen diesen beiden Arten von Cookies, und eine empfehlenswerte Einstellung ist, temporäre Cookies immer anzunehmen, bei permanenten Cookies jedoch nachzufragen. Bei neueren Netscape-Versionen ist sogar ein noch detaillierteres Cookie-Management möglich. Vor temporären Cookies muss aber wirklich niemand Angst haben.


12.3.5 Ein Cookie statt vieler Cookies 
topBilder

Wie bereits mehrfach erwähnt wurde, ist die Anzahl von Cookies beschränkt, zumindest per Spezifikation: Es gibt 300 Cookies insgesamt, aber nur 20 Cookies pro Domain. Dieses Wissen scheint nicht weit verbreitet zu sein, da man oft sieht, dass manche Webmaster auf ihren Seiten mehrere Cookies setzen. In einem Cookie stehen 4 kByte zur Verfügung, also über 4000 Zeichen – ein Wert, der so gut wie nie ausgereizt wird. Es liegt also die Idee nahe, in einem einzelnen Cookie mehrere Informationen zu speichern.

Das Hauptproblem hierbei besteht darin, die Informationen in einem einzigen String zusammenzufassen. Andere Programmiersprachen bieten hierzu Hilfsfunktionen zum Zusammenfassen der Daten an (das nennt man unter anderem auch »Serialisierung«). Bei JavaScript müssen wir uns selbst behelfen.

Der hier vorgeschlagene Weg funktioniert wie folgt:

gpBilder
 
Die Daten werden in einem assoziativen Array abgespeichert.
gpBilder
 
Das assoziative Array wird wie folgt in einen String umgewandelt: Es wird ein neues Array erstellt, in das nacheinander die Schlüssel und dazugehörigen Werte des assoziativen Arrays eingefügt werden. Dieser Aufwand ist nötig, da die Methode toString() bei assoziativen Arrays eine leere Zeichenkette zurückliefert.
gpBilder
 
Das Array wird dann mit der Methode toString() in eine Zeichenkette umgewandelt; das Ergebnis dient als Wert des Cookies.

Das Lesen von Informationen aus dem Cookie erfolgt ähnlich:

gpBilder
 
Die Zeichenkette – gleichzeitig der Inhalt des Arrays – wird aus dem Cookie eingelesen.
gpBilder
 
Mit der eval()-Methode wird die Zeichenkette in ein Array umgewandelt.
gpBilder
 
Eine Schleife durchläuft das Array und erstellt daraus ein assoziatives Array.

Der Code ist in vier Funktionen aufgeteilt:

gpBilder
 
Die Funktion laden_collection() lädt die Daten aus dem Cookie. Als Cookie-Name wird "daten" verwendet. Der Cookie wird eingelesen, und die Zeichenkette wird in ein Array umgewandelt; dazu werden die einzelnen Array-Elemente mit Anführungszeichen umgeben und eckige Klammern um das Ganze geschrieben:
str = str.replace(/,/g, "",""); //Anführungszeichen
str = """ + str + """ //Anführungszeichen
eval("temp = [" + str + "]");

Mit einer Schleife wird daraus das assoziative Array aufgebaut und zurückgegeben.

gpBilder
 
Die Funktion lesen_collection() liest einen einzelnen Wert aus der Collection. Der Name des Wertes wird dabei als Parameter übergeben. Durch einen Aufruf von laden_collection() werden alle Cookie-Daten eingelesen und zurückgegeben; lesen_collection() muss dann nur noch den korrekten Wert auswählen und zurückgeben.
gpBilder
 
Die Funktion speichern_collection() erwartet als Parameter ein assoziatives Array. Dieses Array wird zunächst in ein »normales« Array umgewandelt: Zunächst setzen Sie den Schlüssel, dann den dazugehörigen Wert, und das für alle Elemente:
for (var e in c) {
  temp.push(e);
  temp.push(c[e]);
}

Um eine maximale Browserunabhängigkeit mit alten Browsern (die kein

push()

kennen) zu erreichen, müssen Sie die Elemente wie folgt einfügen:

for (var e in c) {
  temp[temp.length] = e;
  temp[temp.length] = c[e];
}

Anfangs hat das Array keine Elemente, also die Länge 0. Das nächste Element hat daher den Index 0. Allgemein gesagt: Wenn Sie an ein Array

a

ein Element anfügen möchten, müssen Sie einfach

a[a.length]

setzen.

Das resultierende Array wird mit

toString()

in eine Zeichenkette umgewandelt, und diese wird als Wert für den Cookie namens

daten

verwendet. Das Setzen des Cookies erfolgt mit einer (universellen) Funktion

cookie_setzen()

.

gpBilder
 
Die Funktion schreiben_collection() schließlich ändert ein einzelnes Element in der Collection. Als Parameter werden der Name des Elements und der gewünschte Wert übergeben. Die Funktion besteht nur aus drei Kommandos: Zunächst wird mit laden_collection() die Collection geladen, dann wird im resultierenden assoziativen Array der angegebene Wert gesetzt (oder geändert, sollte er bereits existieren). Das modifizierte Array wird an speichern_collection() übergeben und somit wieder im Cookie gespeichert.

Nach diesen detaillierten Vorüberlegungen schreiben sich die Funktionen wie von selbst; Sie finden sie im Folgenden abgedruckt und natürlich auch auf der DVD-ROM zum Buch.

function cookie_setzen() {
  var anzParameter = cookie_setzen.arguments.length;
  var parameter = cookie_setzen.arguments;
  // 1. Cookie-Name
  var name = parameter[0];
  // 2. Cookie-Wert
  var value = (anzParameter >= 2) ? parameter[1] : "";
  value = escape(value); // URL-Codierung
  // 3. Haltbarkeitsdatum
  var expires = (anzParameter >= 3) ? parameter[2] : null;
  if (expires != null) {
    if (expires.toGMTString) {
      expires = expires.toGMTString();
    }
  }
  // 4. Domain
  var domain = (anzParameter >= 4) ? parameter[3] : null;
  // 5. Pfad
  var path = (anzParameter >= 5) ? parameter[4] : null;

  if (path != null) {
    path = escape(path); // Sonderzeichen umwandeln
  }
  // 6. Sicherheitsstufe
  var secure = (anzParameter >= 6) ? parameter[5] : null;
  // Zusammensetzen des Cookies
  var c = name + "=" + escape(value);
  if (expires != null) {
    c += "; expires=" + expires;
  }
  if (domain != null) {

    c += "; domain=" + domain;
  }
  if (path != null) {
    c += "; path=" + path;
  }
  if (secure) {
    c += "; secure";
  }
  // Cookie setzen
  document.cookie = c;
}

function cookie_lesen(name) {
  var i = document.cookie.indexOf(name + "=");
  var c = "";
  if (i > –1) {
    var ende = document.cookie.indexOf("; ",
               i+name.length+1);
    if (ende == –1) {
      ende = document.cookie.length;
    }
    c = document.cookie.substring(i+name.length+1, ende);
  }
  return unescape(c);
}

function laden_collection() {
   var str = cookie_lesen("daten");
   str = unescape(str);
   var temp = new Array();
   // Daten aus dem Cookie in ein Array umwandeln
   if (str != "") {
      str = str.replace(/,/g, "","");
      str = """ + str + """
      eval("temp = [" + str + "]");
   }
   // assoziatives Array erstellen
   var c = new Array();
   for (var i=0; i<temp.length; i+=2) {
     c[temp[i]] = temp[i+1];
   }
   // Array zurückgeben
   return c;
}

function lesen_collection(name) {
   var c = laden_collection();
   return c[name];
}

function speichern_collection(c) {
   var temp = new Array();
   for (var e in c) {
      temp[temp.length]=e;
      temp[temp.length]=c[e];
   }
   cookie_setzen("daten", temp.toString());
}

function schreiben_collection(name, wert) {
   var c = laden_collection();
   c[name] = wert;
   speichern_collection(c);
}

Zur Verdeutlichung folgt hier noch ein kleines Beispiel:

<html>
<head>
<title>Cookie-Collection</title>
</head>
<body>
<script type="text/javascript"><!--
function cookie_setzen() {
   var anzParameter = cookie_setzen.arguments.length;
   var parameter = cookie_setzen.arguments;
   // 1. Cookie-Name
   var name = parameter[0];
   // 2. Cookie-Wert
   var value = (anzParameter >= 2) ? parameter[1] : "";
   value = escape(value); // URL-Codierung
   // 3. Haltbarkeitsdatum
   var expires = (anzParameter >= 3) ? parameter[2] : null;
   if (expires != null) {
      if (expires.toGMTString) {
         expires = expires.toGMTString();
      }
   }
   // 4. Domain
   var domain = (anzParameter >= 4) ? parameter[3] : null;

   // 5. Pfad
   var path = (anzParameter >= 5) ? parameter[4] : null;

   if (path != null) {
      path = escape(path); // Sonderzeichen umwandeln
   }
   // 6. Sicherheitsstufe
   var secure = (anzParameter >= 6) ? parameter[5] : null;
   // Zusammensetzen des Cookies
   var c = name + "=" + escape(value);
   if (expires != null) {
      c += "; expires=" + expires;
   }
   if (domain != null) {
      c += "; domain=" + domain;
   }
   if (path != null) {
      c += "; path=" + path;
   }
   if (secure) {
      c += "; secure";
   }
   // Cookie setzen
   document.cookie = c;
}

function cookie_lesen(name) {
   var i = document.cookie.indexOf(name + "=");
   var c = "";
   if (i > –1) {
      var ende = document.cookie.indexOf("; ",
                 i+name.length+1);
      if (ende == –1) {
         ende = document.cookie.length;
      }
      c = document.cookie.substring(i+name.length+1, ende);
   }
   return unescape(c);
}

function laden_collection() {
   var str = cookie_lesen("daten");
   str = unescape(str);
   var temp = new Array();
   // Daten aus dem Cookie in ein Array umwandeln
   if (str != "") {
      str = str.replace(/,/g, "","");
      str = """ + str + """
      eval("temp = [" + str + "]");
   }
   // assoziatives Array erstellen
   var c = new Array();
   for (var i=0; i<temp.length; i+=2) {
     c[temp[i]] = temp[i+1];
   }
   // Array zurückgeben
   return c;
}

function lesen_collection(name) {
   var c = laden_collection();
   return c[name];
}

function speichern_collection(c) {
   var temp = new Array();
   for (var e in c) {
      temp[temp.length]=e;
      temp[temp.length]=c[e];
   }
   cookie_setzen("daten", temp.toString());
}

function schreiben_collection(name, wert) {
   var c = laden_collection();
   c[name] = wert;
   speichern_collection(c);
}

   schreiben_collection("Autor", "Christian Wenz");
   schreiben_collection("Verlag",
      "Galileo Computing");
   schreiben_collection("Verlag", "Galileo Press");
   var autor = lesen_collection("Autor");
   var verlag = lesen_collection("Verlag");
   document.write("Autor: " + autor + "<br />
");
   document.write("Verlag: " + verlag + "
");
//--></script>
</body>
</html>

Bilder

Abbildung 12.3     Die Werte werden aus der Collection ausgelesen und ausgegeben.

Sie sehen an diesem Beispiel, dass bereits vorhandene Einträge im Cookie direkt überschrieben werden. Es gibt also keine zwei Einträge namens »Verlag«, sondern beim zweiten Setzen des Eintrags »Verlag« wird der erste Eintrag überschrieben.

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von juelo
  • 05.11.2010 - 09:11

Dieser Artikel hat mir die Cookies verständlich näher gebracht.

Portrait von Lugo
  • 21.04.2010 - 09:07

Ziehmliche Tipparbeit für ein Cookie...aber echt klasse^^

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.04.2008 - 18:22

Nicht schlecht der Artikel, interessanter Einblick

Portrait von skyflight1981
  • 19.04.2008 - 23:26

Auch dieser Teil erfüllt meine Erwartungen!

x
×
×