info@a-coding-project.de

Beispiel: Mit Cookies arbeiten in JavaScript

Cookies gelten allgemein als böse, unsauber und gefährlich. Dass diese Vorurteile falsch sind und was man sonst noch mit JavaScript anfangen kann zeigen wir Ihnen hier.

Was sind Cookies?

Cookies sind kleine Dateien, die vom Browser gespeichert werden können. Darin kann die Website Informationen ablegen und später gegebenenfalls wieder auslesen. Im Gegenteil zu häufig ausgemalten Horrozenarien, die die Sicherheit und den Datenschutz bedrohen sind Cookies jedoch mehr als harmlos. Das gesamte Verfahren läuft nur über den Browser - nur er kann den Cookie lesen und an den Server bzw. das Skript weitergeben und nur er kann auch die Daten aus dem Skript oder vom Server bei dem Benutzer ablegen. Der Browser speichert die Informationen des Cookies mit einer ID sowie dem Ablaufdatum versehen in einer externen Datei. Ist ein Cookie gespeichert, kann die Webseite wiederum auf das Gespeicherte zugreifen (sofern das Verfallsdatum noch nicht erreicht wurde) und weiter verwenden. Die Werte innerhalb eines Cookies haben immer die Form: [Name]=[Wert];.

Cookies speichern

Java Script bietet zum Speichern von Cookies die document.cookie-Eigenschaft. Gespeichert wird das Cookie durch eine einfache Zuweisung des zu Speichernden auf die Eigenschaft. Beispiel:

document.cookie = 'name=wert;'; 

So ist das Cookie (nur) während der Laufzeit der aktuellen Seite zugänglich. D.h. sobald eine neue Seite aufgerufen wird, wird auch das Cookie wieder entfernt. Um die Werte dennoch über einen längeren Zeitraum speichern zu können, muss neben dem Namen und dem Wert außerdem noch das Verfallsdatum angegeben werden. Dies geschieht mit dem zusätzlichen expires= Eintrag am Ende des eigentlichen Cookies. Als Wert wird ein Datum übergeben, wann der Cookie abgelaufen ist. Beispiel:

var a = new Date();
a = new Date(a.getTime() +1000*60*60*24*365);
document.cookie = 'meincookie=meinwert; expires='+ 
                  a.toGMTString()+';'; 

Im Beispiel wird ein Date-Objekt erstellt. Dessen Wert wird auf jetzt (a.getTime()) plus ein Jahr (1000 Millisekunden mal 60 Sekunden mal 60 Minuten mal 24 Stunden mal 365 Tage) gesetzt. Anschließend wird der Cookie mit dem Datum gespeichert.

Cookies auslesen

Die gespeicherten Cookies können ebenso wie sie geschrieben werden auch über die document.cookie-Eigenschaft ausgelesen und bearbeitet werden. Um zu prüfen, ob ein Cookie gespeichert wurde reicht eine einfache if-Bedingung, in der geprüft wird, ob das Objekt ansich existent ist. Beispiel:

if(document.cookie){ machwas(); } 

Diese Abfrage sollte allgemein immer vor dem Auslesens eines Cookies geschehen. Andernfalls ist es allerdings auch nicht bedenklich sie weg zu lassen, da dann anstelle des Cookies einfach ein leerer String übergeben wird.
Ein Cookie kann wie ein normaler String gelesen und bearbeitet werden. Um die Namen und Werte des Cookies voneinander zu trennen kann z.B. der folgende Algorithmus verwendet werden:

a = document.cookie;
cookiename = a.substring(0,a.indexOf('='));
if(a.indexOf(';') != -1)
{cookiewert = a.substring(a.indexOf('=')+1,a.indexOf(';'));}
else{cookiewert = a.substr(a.indexOf('=')+1,a.length);}

Cookies löschen

Zum einen Cookie zu löschen gibt es keine eindeutige Beschreibung allerdings kann man sich mit einfachen Tricks behelfen. Das Löschen wird dabei nicht selbständig vorgenommen sondern dem Browser überlassen. Dazu wird das Ablaufdatum des betreffenden Cookies einfach in die Vergangenheit gesetzt. Beispiel:

document.cookie = 'meincookie=meinwert;'+
                  ' expires=Thu, 01-Jan-70 00:00:01 GMT;';
//01.01.1970 sollte schon lange vorbei sein ... 

Mehrere Werte speichern

Wie man einen Wert speichern kann, wissen wir. Was aber wenn mehrere Werte gespeichert werden sollen? Das ganze funktioniert ebenso wie das Speichern eines Wertes nur mit dem Unterschied, dass das Speichern mit den anderen Werten wiederholt wird. Beispiel:

wert1 = 'wert1=abc;';
wert2 = 'wert2=def;';
wert3 = 'wert3=ghi;';
document.cookie = wert1;
document.cookie = wert2;
document.cookie = wert3; 

Auch das Auslesen mehrerer Werte ist ebenso einfach: Der oben beschriebene Algorithmus muss nur etwas erweitert werden. Beispiel:

a = document.cookie;

cookiename1 = a.substring(0,a.indexOf('='));
if(a.indexOf(';') != -1)
{cookiewert1 = a.substring(a.indexOf('=')+1,a.indexOf(';'));}
else{cookiewert1 = a.substr(a.indexOf('=')+1,a.length);}

a = a.substring(a.indexOf(';')+1,a.length);

cookiename2 = a.substring(0,a.indexOf('='));
if(a.indexOf(';') != -1)
{cookiewert2 = a.substring(a.indexOf('=')+1,a.indexOf(';'));}
else{cookiewert2 = a.substr(a.indexOf('=')+1,a.length);}
// ... 

Cookies in der Praxis

Im folgenden werden nun einige Anwendungsbeispiele für Cookies gezeigt werden. Bei allen gehen wir davon aus, dass die folgenden drei Funktionen existent sind:

function Schreiben(n,w,e)
{
 var a = new Date();
 a = new Date(a.getTime() +e);
 document.cookie = n+'='+w+'; expires='+a.toGMTString()+';';
}

function Lesen(n)
{
 a = document.cookie;
 res = '';
 while(a != '')
 {
  while(a.substr(0,1) == ' '){a = a.substr(1,a.length);}
  cookiename = a.substring(0,a.indexOf('='));
  if(a.indexOf(';') != -1)
  {cookiewert = a.substring(a.indexOf('=')+1,a.indexOf(';'));}
  else{cookiewert = a.substr(a.indexOf('=')+1,a.length);}
  if(n == cookiename){res = cookiewert;}
  i = a.indexOf(';')+1;
  if(i == 0){i = a.length}
  a = a.substring(i,a.length);
 }
return(res)
}

function Loeschen(n)
{
 document.cookie = n+'=; expires=Thu, 01-Jan-70 00:00:01 GMT;';

Besucherbegrüßung

Eine nette - wenn auch manchmal nervende - Spielerei mit Cookies ist das Merken des Besuchernamens sowie das anschließende Wiedererkennen des Besuchers und eine entsprechende Begrüßung. Alles was dazu benötigt wird ist der ausgefragte Name der gespeichert werden muss. Später wird er einfach wieder ausgelesen und in den Begrüßungstext eingebaut. Beispiel:

>text = 'Willkommen %1 auf unserer Homepage!';

function NameMerken()
{
 a = prompt('Hallo Besucher. Bitte geben Sie Ihren Namen ein.');
 Schreiben('username',a,1000*60*60*24*365);
 NameHolen();
}

function NameHolen()
{
 if(document.cookie)
 {
  username = Lesen('username');
  if(username != '')
  {
   b = text.replace('%1',username);
   document.writeln(b);
  }
 }
 else{NameMerken()}


NameHolen();
Ebenso läßt sich auch ein Login merken, indem abgefragt wird, ob der User einen entsprechenden Cookie gespeichert hat. Ist das der Fall, kann das Paßwort evtl. noch überprüft werden und der User wird dementsprechend entweder auf die Login-Seite oder auf den User-Bereich umgeleitet. Dies entspricht zwar nicht dem klassischen und sicherstem Verfahren - ist aber einfach und relativ unkompliziert zu realisieren.

Gezieltes Marketing mit Cookies

Eine oft kritisierte aber gern benutzte Anwendungsmöglichkeit von Cookies ist die um damit gezielt Werbung an die Kunden zu bringen. Das System ist einfach: Um in den User-Bereich einer Seite zu gelangen ist eine Registrierung nötig. Dabei gibt der User unter anderem seine Interessen und Hobbys an, die dann als Cookie beim User gespeichert werden. Kommt dieser dann das nächste mal auf die betreffenden Seiten, wird der Cookie ausgelesen und der Besucher erhält auf Ihn zugeschnittene Werbung. Ein kleines Beispielskript soll das System verdeutlichen. Es wird davon ausgegangen, dass es auf der einen Seite ein Formular mit mehreren Checkboxen gibt, die der User ankreuzen kann:

<form action="fertig.html" name="form1" onsubmit="Speichern()">
<h2>Anmeldung vervollständigen ...</h2>
<p>Bitte geben Sie nun Ihre Interessengebiete an,
 um die Anmeldung zu vervollständigen.</p>
 <input type="Checkbox" name="sport"> Sport
 <input type="Checkbox" name="tvkino"> TV & Kino
 <input type="Checkbox" name="werken"> Handwerk
 <!-- usw. ... -->
 <input type="Submit">
</form>
Hat der User seine Wahl getroffen, werden die Daten gespeichert. Das könnte z.B. so geschehen:

function Speichern()
{
 a = document.form1;
 b = 1000*60*60*24*365;

 if(a.sport.checked == true)
 {Schreiben('sport','yes',b);}

 if(a.tvkino.checked == true)
 {Schreiben('tvkino','yes',b);}

 if(a.werken.checked == true)
 {Schreiben('werken','yes',b);}
 // usw.
}
Auf jeder Seite, auf der die angepaßte Werbung geschaltet werden soll, wird der Cookie wieder ausgelesen und je nach Inhalt ein anderer Werbebanner eingeblendet. Der folgende Code stellt dies Beispielhaft dar:

<script type="text/javascript">
<!--
 src = 'normalewerbung.gif';
 link = 'http://www.normale-werbung.de';

 if(document.cookie)
 {
  if(Lesen('sport') == 'yes')
  {src = 'sportwerbung.jpg';    link = 'http://www.sport.de';   }

  else if(Lesen('tvkino') == 'yes')
  {src = 'kinowerbung.jpg';     link = 'http://www.kino.de';    }

  else if(Lesen('werken') == 'yes')
  {src = 'handwerkwerbung.jpg'; link = 'http://www.handwerk.de';}
 }
 document.writeln('<a href="'+link+'"><img src="'+src+
                  '" width="480" height="120" border="1" '+
                  'alt="Klick mich"></a>');
//-->
</script>
<noscript>
 <a href="http://www.normale-werbung.de"><img 
  src="normalewerbung.jpg" width="480" height="120" border="1" 
  alt="Klick mich"></a>
</noscript>
...
Bitte beachten Sie jedoch, dass Sie dieses Beispiel nicht auf Ihrem Home-PC testen können. Der Grund liegt darin, dass es einige Browser nicht gestatten, wenn eine Seite (die in der die Werbung angezeigt werden soll) den Cookie einer anderen (die in der wir den Cookie speichern) auslesen will. Zum Testen benötigen Sie daher einen Webserver. Das Beispiel klappt somit problemlos im Internet - nur eben nicht zu Hause.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant