Cookies und JavaScript

Cookies dienen der Speicherung von Informationen auf Seite des Clients. Sie werden durch den Browser beim Benutzer in einer speziellen Cookie-Datei gespeichert und auch von der Browseranwendung verwaltet. Gespeichert wird in einem Cookie im Grunde genommen nur eine einzelne Zeichenkette – wobei mehrere Cookies unter unterschiedlichen Namen gespeichert werden können. Diese Zeichenkette kann aber mehrere Werte enthalten, die durch ein Trennerzeichen voneinander getrennt sind. Mit der String-Methode split können diese unterschiedlichen Werte später auch wieder separiert werden, so dass der gezielte Zugriff auf die einzelnen Werte möglich ist.

Die in einem Cookie gespeicherten Informationen können beim erneuten Öffnen einer HTML-Seite über welche das Cookie gesetzt wurde abgerufen werden. Unter Verwendung von JavaScript können die gespeicherten Informationen dann wiederum dynamisch in die Seite integriert werden. Die Bandbreite der Informationen, die hier gespeichert werden können ist groß. So kann mit Hilfe eines Cookies beispielsweise die Anzahl der Zugriffe auf eine Internetseite gespeichert werden.

Auch ist es möglich die Benutzbarkeit einer Website mit Hilfe von Cookies und JavaScript zu verbessern. Wird dem Seitenbesucher beispielsweise ermöglicht, die Schriftgröße, in welcher der enthaltene Text im Fenster dargestellt wird, auf seine eigenen Bedürfnisse anzupassen, so kann diese individuelle Einstellung in einem Cookie gespeichert werden. Beim nächsten Besuch auf der Seite können diese Informationen wiederum ausgelesen werden und damit die getätigten Einstellungen des Nutzers umgesetzt werden. Somit muss der Besucher nicht jedesmal, wenn er die Website besucht, die Schriftgröße erneut umstellen.

Ein Cookie ist stets an eine bestimmte Domain gebunden. Es ist grundsätzlich nur möglich auf Cookies mit JavaScript zuzugreifen, die auch von der eigenen Domain gesetzt wurden. Auf Cookies von anderen Domains kann dagegen nicht zugegriffen werden. Darüber hinaus gilt, dass der Besucher das Setzen von Cookies erlauben muss. Diese Erlaubnis kann der Besucher über globale Cookie-Einstellungen oder aber bezogen auf bestimmte Domains erteilen oder auch verweigern.

JavaScript Cookie Beispiel 1: Speicherung von Cookies mit JavaScript möglich

Das JavaScript-Objekt navigator beinhaltet eine Eigenschaft, über die per JavaScript abgefragt werden kann, ob Cookies in der Browseranwendung aktiviert sind oder nicht. Diese Eigenschaft mit dem Namen cookieEnabled erlaubt aber nur den lesenden Zugriff auf diese Statusinformation. Dagegen ist es per JavaScript nicht möglich, das akzeptieren von Cookies einzuschalten.

Im ersten Beispiel wird die Frage beantwortet, ob der Benutzer uns das Setzen von Cookies erlaubt hat. Hierzu wird die zuvor angedeutete Eigenschaft cookieEnabled des Navigator-Objekts abgefragt und mit dem if-Statement entschieden, welche Ausgabe erfolgen soll. Ist es uns erlaubt Cookies zu setzen – dieses Recht beinhaltet natürlich auch das Auslesen von Cookies –, so wird dies mit der Ausgabe einer entsprechenden Zeichenkette kund getan. Ansonsten wird die zweite Zeichenkette ausgegeben, die besagt, dass wir keine Erlaubnis zur Verarbeitung von Cookies haben.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
if (navigator.cookieEnabled == true)
  document.write ('Sie haben uns das Speichern von Cookies erlaubt!<br>' +
      'Auch die anderen Beispiele werden bei Ihnen funktionieren!');
else
  document.write ('Das Speichern von Cookies ist uns leider nicht erlaubt!<br>' +
      'Demnach funktionieren auch die Beispiele unten bei Ihnen nicht!');
// -->
</script>

JavaScript Cookie Beispiel 2: Mit JavaScript Cookies setzen

Das nun folgende Beispiel zeigt, wie Sie Cookies bei Ihren Besuchern setzen können. Hierzu wird eine Funktion mit dem Namen set_cookie definiert, die zwei Parameter erwartet. Im ersten Parameter wird der Name des Cookies festgelegt, während der zweite Parameter den zu setzenden Wert angibt. Aufgabe der Funktion ist es, ein Cookie durch Zuweisung eines Cookie-Strings zu setzen.

Ein solches Cookie-String ist eine normale Zeichenkette und besteht aus mindestens einer Komponente. Diese Komponente enthält den Namen und den Wert des zu setzenden Cookies, wobei Name und Wert durch ein Gleichheitszeichen voneinander getrennt werden müssen. Werden mehrere Komponenten angegeben, so sind diese durch ein Semikolon voneinander zu trennen. Eine zweite wichtige Komponente von Cookies betrifft die Lebensdauer des zu setzenden Cookies – hierüber wird angegeben, wann ein Cookie ausläuft (expires). Der Ablaufzeitpunkt eines Cookies wird als GMT-String angegeben. Gibt das Cookie-String keine Expires-Komponente an, so gilt das Cookie nur solange, wie das Browserfenster geöffnet bleibt.

Darüber hinaus kann ein Cookie drei weitere Eigenschaften besitzen. Die erste Eigenschaft ist die Path-Eigenschaft, die eine Aussage darüber trifft, ab welchem Verzeichnis im Verzeichnisbaum ein Cookie sichtbar ist. Wird hier ein „/” angegeben, so ist das Cookie auf allen Seiten sichtbar; steht dort ein „/glossar/”, so sehen nur die Seiten, welche unterhalb des Verzeichnisses /glossar/ abgelegt sind, das Cookie. Eine weitere Eigenschaft, die im Zusammenhang mit Cookies von Interesse ist wird unter der Eigenschaft Domain angegeben. Wie bei den Cookie-Parametern zuvor wird die Domain, unter der das Cookie sichtbar sein soll in der Form domain=DOMAINNAME angegeben. Bestimmte Domains werden in der Form ihr_domainname.de, Subdomains mit subdomainname.ihr_domainname.de angegeben. Sollen alle Subdomains der Domain das Cookie lesen können, so sollten Sie dies in der Form .ihr_domainname.de angeben.

Über den letzten Cookie-Parameter, können Sie angeben, ob Cookies nur gesetzt werden sollen, wenn eine Anfrage über das https-Protokoll gestellt wird. Ist dies gewünscht, so muss das Wort „secure” an das Cookie-String angehängt werden – auch hier trennt wieder ein Semikolon diesen Cookie-Parameter vom Rest der Cookie-Angaben. Das Cookie wird dann nur bei gesicherten Verbindungen gesetzt.

Doch nun wieder zu unserem Beispiel: Der Zeitpunkt, an dem das Cookie seine Gültigkeit verliert wird mit Hilfe eines JavaScript Date-Objekts berechnet. Dazu wird zunächst ein Date-Objekt erzeugt, welches das aktuelle Datum und die aktuelle Zeit enthält, und dieses dann unter der Variablen now gespeichert. Die Variable expires wird danach mit einem neuen Datumsobjekt initialisiert, wobei zum Timestamp des aktuellen Zeitpunkts (getTime liefert diesen Timestamp für das Datum-Objekt now) 30 Minuten hinzuaddiert werden – das Cookie ist damit eine halbe Stunde lang gültig. In der letzten Zeile der Funktion set_cookie werden die Cookie-Parameter – Name und Wert des Cookies, der Gültigkeitspfad, sowie der Ablaufzeitpunkt – zu einem Cookie-String zusammengefasst und danach der Eigenschaft cookie des Document-Objekts zugewiesen. Damit sind dann alle nötigen Schritte zum Setzen des Cookies durchgeführt.

Mit der zweiten Funktion set_my_own_cookie, die ebenfalls im unteren Script-Abschnitt gelistet ist, können Sie eigene Cookies setzen. Den Namen und den Wert des Cookies können Sie jeweils in einem Eingabedialog eingeben. Hier wird zum Setzen des Cookies die zuvor beschriebene Funktion set_cookie verwendet.

Bitte beachten Sie, dass die per JavaScript gesetzten Cookies erst nach einem erneuten Laden der Seite in Ihrem Browser angezeigt werden. Wenn Sie durch Anklicken des Links „Cookie setzen” das Cookie zur Speicherung der Seitenaufrufe speichern, hat dieses Cookie nach erneutem Laden natürlich den Wert 2. Der Grund hierfür: Den Wert 1 erhält das Cookie direkt beim Setzen – was Sie allerdings nicht auf der Seite sehen, wohl aber, wenn Sie über die Cookie-Verwaltung Ihres Browsers nachschauen – und ein erneutes Laden setzt das Cookie dann um eins herauf.

<a href="javascript:set_cookie ('seitenaufrufe', 1)" title="">Cookie setzen</a><br>
<a href="javascript:set_my_own_cookie ()" title="">eigenen Cookie setzen</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion setzt einen Cookie mit dem übergebenen Namen name auf den ebenfalls
// übergebenen Wert value.
function set_cookie (name, value) {
  // Aktuelles Datum und Zeit holen, um damit den Ablaufzeitpunkt des
  // Cookies berechnen zu können.
  var now = new Date ();
  // Cookies sollen nach 30 Minuten ablaufen
  var expires = new Date (now.getTime () + 30 * 60 * 1000);
  // Cookie mit übergebenen Namen auf den ebenfalls übergebenen Wert setzen.
  // Sichtbar ist das Cookie auf der aktuellen Domain (da nichts anderes angegeben wird)
  // und in allen Verzeichnissen.
  // Die Gültigkeit wird auf den zuvor berechneten Zeitpunkt beschränkt.
  document.cookie = name + '=' + value + ';path=/;expires=' + expires.toGMTString ();
}

// Setzen eines eigenen Cookies
function set_my_own_cookie () {
  // Name des Cookies eingeben
  var name = window.prompt ('Name des Cookies');
  // Wert, der im Cookie gespeichert werden soll eingeben
  var value = window.prompt ('Wert des Cookies');
  // Cookie setzen
  set_cookie (name, value);
}
// -->
</script>

Cookie setzen
eigenen Cookie setzen

JavaScript Cookie Beispiel 3: Mit JavaScript Cookies auslesen

Das folgende Beispiel demonstriert das Auslesen von Cookies mit Hilfe von JavaScript. Hier wird als erstes gefragt, ob durch die Seite bereits Cookies gespeichert wurden – ist dies nicht der Fall, so wird im Else-Teil der Abfrage ganz unten im Script-Bereich eine entsprechende Meldung per write() ausgegeben. Ansonsten wird später mit Hilfe der String-Methode match geprüft, ob unter den gespeicherten Cookies eines mit dem Namen seitenaufrufe ist. Dies ist nötig, da alle gespeicherten Cookies unter der Document-Eigenschaft cookie hintereinander in einer Zeichenkette abgelegt sind. Einzelne Cookies stehen hier in der Form cookiename=cookiewert und sind durch ein Semikolon, auf welches unmittelbar ein Leerzeichen folgt, voneinander getrennt.

Ist dies der Fall, so wird mit dem regulären Ausdruck der unter diesem Cookie gespeicherte Wert entnommen, der dann in RegExp.$1 steht. Dieser Wert wird mit parseInt in eine ganze Zahl umgewandelt und um eins erhöht. Nach der Aktualisierung des Cookies durch Aufruf der oben definierten Funktion set_cookie wird der Inhalt des Cookies zum Zeitpunkt des Seitenaufrufs und danach der neue Stand des Cookies angezeigt.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Sind bereits Cookies durch die Seite gespeichert worden?
if (document.cookie) {
  // Wenn ja, dann werden diese ausgelesen und zwischengespeichert.
  var cookies = document.cookie;
  // Ist der von dieser Seite gespeicherte Cookie dabei und enthält
  // er einen Zahlenwert?
  if (cookies.match (/seitenaufrufe=([0-9]+)/g)) {
    // Wert des Cookies um eins erhöhen...
    var counter = parseInt (RegExp.$1) + 1;
    // und den neuen Wert speichern.
    set_cookie ('seitenaufrufe', counter);
  }
  // Ausgabe der von unserer Seite gespeicherten Cookies
  document.write ('Inhalt der bei Ihnen gespeicherten Cookies beim Seitenaufruf: ' + cookies + '<br>' +
      'Aktueller Inhalt der bei Ihnen gespeicherten Cookies: ' + document.cookie);
}
else
  // Es wurden bislang keine Cookies gespeichert.
  document.write ('Es ist kein Cookie bei Ihnen gespeichert!');
// -->
</script>

JavaScript Cookie Beispiel 4: Mit JavaScript Cookies löschen

Im folgenden Beispiel wird das Löschen eines Cookies demonstriert. Die unten definierte Funktion delete_cookie dient genau diesem Zweck. Gelöscht wird dieser, weil als Ablaufdatum des Cookies auf einen bereits vergangenen Zeitpunkt gesetzt wird. Durch erneute Zuweisung der Cookiedaten wird das Cookie vom Browser geläscht, da es bereits abgelaufen ist. Wichtig ist hier, dass darauf geachtet wird, dass alle Angaben zum Pfad und zur Domain korrekt sind. Wird das Cookie beispielsweise in einem Unterverzeichnis gelöscht und kein Pfad angegeben, so existiert es in anderen Verzeichnissen weiterhin bzw. wird gar nicht erst gelöscht.

Ob das Cookie auch gelöscht wurde ist auf dieser Seite aber erst sichtbar, wenn diese erneut geladen wird. Deshalb wird auch umgehend mit reload() das erneute Laden der Seite eingeleitet. Die JavaScript Methode reload gehört zur Schnittstelle des Location-Objekts, einem unmittelbaren Kindobjekt des Window-Objekts. Das automatische Neuladen der Seite ist aber nur zu Demonstrationszwecken sinnvoll – unter normalen Umständen ist es nicht nötig.

<a href="javascript:delete_cookie ()" title="">Cookie loeschen</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zum Löschen des Cookies mit dem Namen seitenaufrufe
function delete_cookie () {
  // Ablaufdatum auf den 1.1.1970 setzen, wodurch das Cookie direkt nachdem
  // es gesetzt wird abgelaufen ist.
  document.cookie = 'seitenaufrufe=0;path=/;expires=Thu, 01-Jan-70 00:00:01 GMT';
  // Auswirkung wird erst nach einem Reload sichtbar...
  location.reload ();
}
// -->

Cookie loeschen

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht