JavaScript/DOM/Document/cookie

Die Eigenschaft cookie speichert beim Anwender einen Cookie (speicherbare Zeichenkette).

Schreiben und Auslesen eines Cookies ansehen …

function init() {
 let gespeichert = 'nichts gespeichert';
 if (document.cookie) {
   gespeichert = document.cookie;
 } else {
   document.cookie = 'Zeitstempel=' + document.lastModified;
 }
 let text = document.lastModified + ' - ' + gespeichert;
 ausgabe(text);
}

function ausgabe(text) {
  let ausgabe = document.getElementById('info');
  ausgabe.innerHTML = text;
}

window.addEventListener('DOMContentLoaded', init);

• Das Lesen eines Cookies funktioniert nach dem Schema x = document.cookie.
• Das Schreiben eines Cookies funktioniert nach dem Schema document.cookie = x.

Das Beispiel fragt beim Einlesen der Datei ab, ob diese Datei schon einmal einen Cookie gesetzt hat. Eine solche Abfrage ist mit if(document.cookie) möglich. Im Beispiel wird die Variable gespeichert mit dem Wert des gespeicherten Cookies versorgt, falls ein Cookie vorhanden ist. Im else-Zweig des Beispiels steht der Fall, dass noch kein Cookie gesetzt wurde. In diesem Fall wird als Cookie die Zeichenkette Zeitstempel und dahinter der Wert von lastModified geschrieben. Am Ende werden zwei Werte ausgegeben: nämlich der Wert von document.lastModified und der Wert der Variablen gespeichert. Wenn ein Cookie gesetzt ist (also ab dem zweiten Aufruf der Datei), wird der Inhalt des Cookies ausgegeben, der sich von document.lastModified dann unterscheidet, wenn die Datei mittlerweile geändert wurde.

Verfallszeitpunkt

Beim Setzen eines Cookies können Sie außerdem einen Verfallszeitpunkt angeben. Wenn der Verfallszeitpunkt erreicht ist, löscht der Browser den Cookie selbständig. Notieren Sie dazu eine Anweisung der Form: document.cookie = "expires=" + Verfallsdatum;

Damit der Browser diese Eigenschaft interpretiert, muss das Verfallsdatum mit der Methode toGMTString() des Date-Objektes formatiert werden.

Cookie mit Verfallszeitpunkt ansehen …

function init() {
  let ablauf = new Date();
  let infuenfTagen = ablauf.getTime() + (5 * 24 * 60 * 60 * 1000);
  ablauf.setTime(infuenfTagen);
  document.cookie = 'Name=SELFHTML; expires=' + ablauf.toGMTString();
  ausgabe(document.cookie);
}
 
function ausgabe(text) {
  let ausgabe = document.getElementById('info');
  ausgabe.innerHTML = text;
}
 
window.addEventListener('DOMContentLoaded', init);

In der Variablen ablauf wird eine neue Instanz des Date-Objekt angelegt. Diese enthält das aktuelle Datum. Das Verfallsdatum ist 5 Tage nach dem Setzen des Cookies. Zur Bestimmung des Verfallsdatums wird das aktuelle Datum mit der Methode getTime() in Millisekunden umgewandelt. Zu diesem Wert wird die Anzahl der Millisekunden für 5 Tage addiert. Um den Millisekundenwert zu ermitteln, können Sie wie im Beispiel eine Multiplikationskette übergeben: 1000 Millisekunden sind eine Sekunde, mal 60 macht eine Minute, mal 60 macht eine Stunde, mal 24 ein Tag, und mal 5 macht fünf Tage.

Um eine gültige Datumszeichenkette zu erhalten, wird mit der Methode setTime() dem Datum ein neuer Wert zugewiesen. In der Variablen ablauf ist dann das korrekte Ablaufdatum gespeichert.

Dem Cookie wird schließlich das mit der Methode toGMTString() formatierte Datum übergeben.

Beachten Sie: Jede HTML-Datei hat Kenntnis von allen Cookies, die von Dateien aus dem gleichen oder einem höheren Verzeichnis gesetzt wurden. Angenommen, bei einer Domain https://example.com mit dem Unterverzeichnis /A gibt es in diesem Unterverzeichnis sowie im Wurzelverzeichnis / jeweils eine Datei namens x.html. Beide Dateien enthalten jeweils ein JavaScript mit der Anweisung:

document.cookie = location.href;

Damit wird der URI der Datei in einem Cookie gespeichert. Ferner gibt es in beiden Verzeichnissen eine Datei y.html, die jeweils folgende JavaScript-Anweisung enthält:

document.write(document.cookie);

Damit wird ein vorhandener Cookie dynamisch ins Dokumentfenster geschrieben. Bei der angenommenen Anordnung liefern folgende Dateien folgende Ausgaben:

https://example.com/y.htmlliefert: https://example.com/x.html (kann also den Cookie lesen, den x.html im gleichen Verzeichnis gesetzt hat)

https://example.com/A/y.html liefert: https://example.com/A/x.html; https://example.com/x.html (kann also den Cookie lesen, den x.html im gleichen Verzeichnis gesetzt hat, sowie den Cookie, den die x.html im Verzeichnis oberhalb gesetzt hat.)

Mittels der Eigenschaft navigator.cookieEnabled können Sie abfragen, ob der Anwender die Verwendung von Cookies aktiviert hat.

Siehe auch

• Cookie: Übersichtsseite mit Erklärung und vielen Links
• JavaScript/Tutorials/Persönliche Seitenbesuche zählen mit Cookies
• JavaScript/Web Storage