15.5 Beispiel für die Nutzung
Die vollständige Nutzung eines Cookies werde ich anhand der Speicherung einer Adressangabe zeigen. Der Benutzer gelangt auf eine Seite, auf der er seine Daten eintragen kann. Falls er zum ersten Mal auf dieser Seite ist, dann sind die Eingabefelder leer, siehe Abbildung 15.2. Er gibt seine Adressdaten ein und sendet die Bestellung ab.
Abbildung 15.2 Erster Besuch
Falls er nach einem späteren Öffnen des Browsers, z. B. einige Tage darauf, noch einmal eine Bestellung ausführt, stehen seine Adressdaten bereits auf der Seite, siehe Abbildung 15.3.
Abbildung 15.3 Folgebesuch
Zunächst der zweite Teil des Programms:
...
<body>
<p>Danke für Ihren Einkauf. Bitte geben Sie Ihre Adresse ein<br>
oder bestätigen Sie die angegebene Adresse:</p>
<form id="idForm" action="#">
<script>
document.write("<p><input id='idNach' value='"
+ lesen("nach") + "'> Nachname</p>");
document.write("<p><input id='idPlz' value='"
+ lesen("plz") + "'> PLZ</p>");
document.write("<p><input id='idOrt' value='"
+ lesen("ort") + "'> Ort</p>");
</script>
<p><input type="submit"></p>
</form>
<script>
document.getElementById("idForm")
.addEventListener("submit", schreiben);
</script>
</body></html>
Listing 15.5 Datei »ck_adresse.htm«, zweiter Teil
Die drei Eingabefelder innerhalb des Formulars werden mithilfe von JavaScript ausgegeben. Für die Ausgabe des Werts des Attributs value wird jeweils die Funktion lesen() aufgerufen. Falls es bereits ein Cookie mit dem betreffenden Namen gibt, liefert diese Funktion den Wert zurück. Ansonsten liefert die Funktion eine leere Zeichenkette zurück.
Es folgt der erste Teil des Programms:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Cookies, Adresse</title>
<script>
var feld = document.cookie.split(";");
var cName = new Array();
var cWert = new Array();
for(let i=0; i<feld.length; i++)
{
if(feld[i].charAt(0) == " ")
feld[i] = feld[i].substring(1);
let teil = feld[i].split("=");
cName.push(teil[0]);
cWert.push(teil[1]);
}
function lesen(name)
{
for(let i=0; i<cName.length; i++)
if(cName[i] == name)
return cWert[i];
return "";
}
function schreiben()
{
var zeit = new Date();
zeit.setTime(zeit.getTime() + 365 * 24 * 60 * 60 * 1000);
var cExpire = ";expires=" + zeit.toUTCString();
document.cookie = "nach="
+ document.getElementById("idNach").value + cExpire;
document.cookie = "plz="
+ document.getElementById("idPlz").value + cExpire;
document.cookie = "ort="
+ document.getElementById("idOrt").value + cExpire;
alert("Danke für Ihre Bestellung");
}
</script>
</head>
...
Listing 15.6 Datei »ck_adresse.htm«, erster Teil
Als Erstes werden beim Aufruf der Seite alle zugehörigen Cookies gelesen und in zwei Feldern abgespeichert: der Name des Cookies im Feld cName und der Wert des Cookies im Feld cWert. Es wird darauf geachtet, dass der Name kein führendes Leerzeichen enthält. Zu Beginn sind die Felder leer. Die Methode push() des Array-Objekts dient zum Anhängen der neuen Elemente an das Ende des jeweiligen Felds.
In der Funktion lesen() werden die Elemente des Felds cName geprüft. Falls eines der Elemente dem gesuchten Namen entspricht, dann wird der zugehörige Wert zurückgesandt. Jetzt ist es wichtig, dass der Name kein führendes Leerzeichen enthält. Die Anweisung return führt zum sofortigen Verlassen der for-Schleife und der Funktion. Falls der gesuchte Name nicht gefunden wird, dann wird eine leere Zeichenkette zurückgeliefert.
Als Letztes folgt die Funktion schreiben(), die beim Absenden der Daten die Cookies erzeugt. Die Gültigkeit beträgt 365 Tage. Anschließend werden die drei Cookies mit den Werten erzeugt, die der Benutzer in den Eingabefeldern eingetragen hat mit der genannten Gültigkeit.