Cookies in JavaScript

Cookies sind kleine Dateien, die vom Browser gespeichert werden können. Darin kann die Website Informationen ablegen und später gegebenfalls wieder auslesen. Dabei gibt es zwei Varianten, wie Cookies gesetzt werden können: per HTTP oder per ( Java )Script. In beiden Fällen entnimmt der Browser die Informationen und speichert sie mit einer ID sowie dem Ablaufdatum versehen in einer externen Datei. Ist ein Cookie gespeichert, kann die Webseit 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];.

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 ausserdem 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.

Die gespeicherten Cookies können ebeneso 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 voneinader zu trennen kann z.B. der folgende Algorithmus verwendet werden:

a = document.cookie;
cookiename = a.substr(0,a.search(‚=‘));
cookiewert = a.substr(a.search(‚=‘)+1,a.search(‚;‘));
if(cookiewert == “)
{cookiewert = a.substr(a.search(‚=‘)+1,a.length);} 

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 selbsstä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 … 

Wie man einen Wert speichern kann, wissen wir. Was aber wenn mehrere Werte gespeichert werden sollen? Nichts einfacher als das! 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.search(‚=‘));
cookiewert1 = a.substring(a.search(‚=‘)+1,a.search(‚;‘));
if(cookiewert1 == “)
{cookiewert1 = a.substring(a.search(‚=‘)+1,a.length);}

a = a.substring(a.search(‚;‘)+1,a.length);

cookiename2 = a.substring(0,a.search(‚=‘));
cookiewert2 = a.substring(a.search(‚=‘)+1,a.search(‚;‘));
if(cookiewert2 == “)
{cookiewert2 = a.substring(a.search(‚=‘)+1,a.length);}
// … 

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:

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 != “)
 {
  cookiename = a.substring(0,a.search(‚=‘));
  cookiewert = a.substring(a.search(‚=‘)+1,a.search(‚;‘));
  if(cookiewert == “)
  {cookiewert = a.substring(a.search(‚=‘)+1,a.length);}

  if(n == cookiename){res = cookiewert;}

  i = a.search(‚;‘)+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;‘;
} 

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()}
}