HEY HO! - let's go!

Cookie schreiben für "Wiedererkennung"

Damit das virtuelle Haustier seinen Benutzer - pardon, Herrchen bei der schon in Snippet 3 vorgestellten Funktion tierAngefasst() wiedererkennt und dies auch nach Schließen der Site und erneuter Öffnung, schreiben wir hier einen Cookie. Er speichert den Namen des Nutzers für in diesem Beispiel 3 Tage. Die Haltbarkeit eines Cookies (Persistenz) wird immer in Tagen angegeben. Eine Anweisung wie 5*365 speichert den Wert für fünf Jahre.

Die function begruessen() wird um zwei if-Anweisungen ergänzt: wenn (if Nummer 1) der Browser Cookies ermöglicht, begrüße den Nutzer mit Namen, falls (if Nummer 2) er ihn bei einem vorigen Besuch schon mal eingegeben hat. Der else-Zweig setzt den Standardgruß in Gang.

Die erweiterte function tierAngefasst() bedankt sich für einen Klick auf das Bild ("streicheln") beim mit dem Namen angesprochenen Benutzer, wenn er schon mal eingegeben wurde. Wenn nicht, wird er nach dem Namen gefragt und dieser dann im Cookie gespeichert, if (navigator.cookieEnabled). Falls diese Prüfung false ergibt, wird der Besucher darüber informiert, dass sich das Tier leider nicht an ihn wird erinnern können, da der Browser keine Cookies zulässt.


<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
	var benutzer;
	
function tierAnpassen() {
        document.getElementById("tierchen").style.height = ↵
(document.body.clientHeight - 60) * 0.9;
      }
	  
function begruessen() {
        if (navigator.cookieEnabled)
          benutzer = liesCookie("tier_benutzername");
        if (benutzer)
          alert("Hallo " + benutzer + ", du hast mir gefehlt.");
        else
          alert('Hallo, ich bin dein blaues Tier.');
      }

    function tierAngefasst() {
        if (benutzer) {
          alert("Das gefällt mir, " + benutzer + ". Danke.");
        }
        else {
          benutzer = prompt("Wie heißt du?", "Gib deinen Namen ein.");
          if (benutzer) {
            alert("Schön, dich kennenzulernen, " + benutzer + ".");
            if (navigator.cookieEnabled)
              schreibeCookie("tier_benutzername", benutzer, 3);
            else
              alert("Dein Browser unterstützt keine Cookies. Deshalb kann ich ↵
mich später leider nicht an dich erinnern. Entschuldige bitte.");
          }
        }
        document.getElementById("tierchen").src = "images/tier_blau_gluecklich.png";
        setTimeout("document.getElementById('tierchen').src = ↵
'images/tier_blau_traurig.png';", 10000);
      }
	  
</script>

Kopfbereich der Seite und HTML-Teil sind exakt wie in Snippet 3; bitte bei Bedarf dort herholen. Die Pfeilchen ↵ erzeugen beim Kopieren und Einfügen des Codes Fragezeichen; diese müssen gelöscht werden.

					
function schreibeCookie(name, wert, tage) {
  // Standardmäßig gibt es kein Verfallsdatum, also temporärer Cookie
  var verfallsDatum = "";

  // Werden Tage bis zum Verfallsdatum angegeben, ist der Cookie persistent 
  if (tage) {
    var datum = new Date();
    datum.setTime(datum.getTime() + (tage * 24 * 60 * 60 * 1000));
    verfallsDatum = "; expires=" + datum.toGMTString();
  }

  // Cookie mit Name, Wert und Verfallsdatum festlegen
  document.cookie = name + "=" + wert + verfallsDatum + "; path=/";
}

function liesCookie(name) {
  // Angegebenen Cookie finden und den Wert zurückliefern
  var suchName = name + "=";
  var cookies = document.cookie.split(';');
  for(var i=0; i < cookies.length; i++) {
    var c = cookies[i];
    while (c.charAt(0) == ' ')
      c = c.substring(1, c.length);
    if (c.indexOf(suchName) == 0)
      return c.substring(suchName.length, c.length);
  }
  return null;
}

function loescheCookie(name) {
  // Angegebenen Cookie löschen
  writeCookie(name, "", -1);
}

Oben der Inhalt der inkludierten Datei cookie.js