Multimediakurs Leinfelder: Modul 11 - Anlagen: Cookies für Fortgeschrittene
(© copyright)     Letzte Änderungen:28.03.2003

Position innerhalb des Kurses

Modul 11: Anlage 14b: Cookies für Fortgeschrittene

von Reinhold Leinfelder

Dies ist die Fortsetzung von Anlage 14, die Sie zum Verständnis unbedingt durchgearbeitet haben müssen.

Nachfolgend ein Beispiel zum vereinfachten Auslesen von Cookies mit der split()-Methode für Strings. Was soll erreicht werden?

Alternativ könnte das Popupfenster auch erst wieder bei Vorliegen einer neuen Version der Newsseite geöffnet werden, siehe unten.

Das unten erläuterte Skript wird (teilweise mit anderen Variablennamen) für das gemeinsame Newsfenster von palaeo.de-Portal (www.palaeo.de) und Seiten der Paläontologischen Gesellschaft (www.palaeo.de/palges), jeweils auf beiden Eingangsseiten verwendet.

Beispiel Cookie 4: Automatisches Öffnen eines Popup-Newsfenster nur einmal pro Tag, auch bei wiederholtem Seitenbesuch.

Beispiel Cookie 4 ist ein Headerskript. Die function news() wird über einen entsprechenden onload-Handler im Body der Seite aufgerufen (also <body onload="news()"> )

<script language="JavaScript"><!--

var wasdas="erstmorgen";
// wasdas wird ein String zugeordnet, der dann als Wert für das zu setzende
//Cookie verwendet wird. Der Wert ist für unsere Zwecke quasi
//beliebig. Wir setzen die Variable global, damit wir sie auch
//von anderen Funktionen aus aufrufen können.

function news()
{
var heute=cookiesuchen("cookie_news");
//der Variablen heute wird als Wert der Returnwert der function
//cookiesuchen() zugeordnet. Diese Codezeile ruft die entsprechende, weiter
//unten stehende function als "selbstgeschaffene" Methode auf. Gleichzeitig wird der //Namenswert für das Cookie mit übergeben.

var ranzig=new Date();
var morgen = ranzig.getTime() + (24 * 60 * 60 * 1000);
ranzig.setTime(morgen);
var link, newswin;
// ranzig wird erst als neues Datumsobjekt (aktuelles Datum) definiert.
//in der Variablen morgen wird ranzig mit der getTime-Methode in
//Millisekunden umgewandelt und ein kompletter Tag, wiederum in Millisekunden
//hinzugefügt. Danach wird ranzig neu definiert, und zwar mit der setTime-
//Methode, der der Millisekundenwert der Variablen morgen mitgegeben wird.

//Nur falls nun der Wert von heute, d.h. der Rückgabewert der function
//cookiesuchen() gleich Null ist, wurde das gesuchte Cookie noch nicht gesetzt (bzw. ist bereits verfallen) und das Newsfenster wird mit der window.open()-Methode geöffnet und mit der focus()-Methode in den Vordergrund gesetzt.

if (heute==null)
{

//zuerst wird jedoch unser Cookie namens cookie_news gesetzt. Als Wert
//bekommt es den Wert der Variablen wasdas mit, als Verfallsdatum den Wert
//der redefinierten Variablen ranzig, also von morgen).
//Hinweis: prinzipiell kann diese Zeile auch am Schluss der if-Abfrage stehen, also
//nach infowin.focus. Unter NC 4.x wird dann allerdings die in window.open eingestellte
//Größe des Popupfensters ignoriert (äußerst merkwürdig). Korrekt läuft alles ab, wenn wir das Cookiesetzen wie in unserem Beispiel vorziehen.

cookiesetzen("cookie_news", wasdas, ranzig);

//nun wird, wie oben beschrieben das Popupfenster geöffnet und in den Vordergrund gebracht.

link="news.html";
newswin = window.open(inhalt,"info",'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=300, height=300');
newswin.focus();
//Hinweis für offline-Tester: solange Sie keine korrekte Inhaltsdatei für das
//Popupfenster /also z.B. news.html)produziert und korrekt verlinkt haben
//läuft die focus-Methode ins Leere und es erscheint eine JavaScript-Fehlermeldung
//alles läuft jedoch korrekt, wenn der Link zu news.html bzw. der von Ihnen verwendeten
//Datei korrekt gesetzt ist und diese Datei auch vorhanden ist.
}
//ist die if-Bedingung nicht erfüllt, passiert gar nichts, d.h. das
//Newsfenster bleibt zu, da nämlich das Cookie gefunden wurde und der Wert
//des Cookies ungleich Null war (nämlich genauer: "heutenicht")

}

//Nun die Funktion zum Cookie-Auslesen, die oben via heute-Wert als selbstdefinierte
//Methode aufgerufen wurde. Der variablenname name als Platzhalter bedeutet, dass
//erwartet wird, dass bei Aufruf ein Parameter mit übergeben wird.
function cookiesuchen(name)
{

//wir verwenden die Stringmethode split() und übergeben als Splitzeichen den
//Strichpunkt. Damit wird der Gesamtcookiestring bei allen Semikolons in
//substrings geteilt, die als Array vorliegen. Danach schauen wir noch mit der cookie-Eigenschaft
//length, wieviele Bruchstücke nun im String gespeichert sind
//(entspricht nicht der Anzahl der Cookies, siehe unten).

var keksbrocken=document.cookie.split("; ");

//ganz wichtig: nicht das Leerzeichen hinter dem Semikolon für das
//Herauslesen vergessen. Ansonsten funktioniert das Skript nicht, wie ich
//aus eigenem stundenlangen, entsprechendem Debugging weiss.

var Brockenzahl=keksbrocken.length;
var gesuchterCookie;


//in einer Schleife wird nun solange der nachfolgende Code abgefragt, bis
//alle durch die Split-Methode erstellten Fragmente des Gesamtcookiestrings,
//d.h. die Brockenzahl abgecheckt sind.

for (a =0; a < Brockenzahl; a++)
{

//nun wird noch als Variable gesuchterCookie ein vorhandener Arrayeintrag am
//istgleich-Zeichen gesplittet.

gesuchterCookie=keksbrocken[a].split("=");

//wenn nun einer dieser neuen Kekskrümel namens gesuchterCookie dem String cookie_news (dies wird ja aufgrund der Übergabe des Werts von name
// verglichen)entspricht, haben
//wir unser gesuchtes Cookie gefunden. Da jedem Wert des Arrays Cookies durch
//nochmaliges Splitten an der istgleich-Stelle ein weiterer Arraydoppelwert '
//gesuchterCookie (indexnr. 0 für Name und 1 für Cookiewert) zugeordnet ist,
//können wir bei gefundenem Cookie dessen Wert als Array-Indexwert 1 der
//Variablen gesuchterCookie via return zurückgeben lassen. Danach wird die
//Schleife mit Break abgebrochen.

if (gesuchterCookie[0] == name)
{
return unescape(gesuchterCookie[1]);
break;
}
}

//wenn das Cookie nicht gefunden wird, d.h. nicht vorhanden ist, wird als
//Returnwert der function cookiesuchen() null zurückgegeben. Damit wird
//weiter obenstehende if-Abfrage der function news() , die ja die function
//cookiesuchen() aufgerufen hat, abgearbeitet.

return null;
}

//nun kommt noch die function cookiesetzen(), die ja ebenfalls von der function
//news() aufgerufen wird. Sie ist ganz offen gehalten, so dass sie jederzeit
//und beliebig oft, auch mit verschiedenen Parametern aufgerufen werden kann.
//Mit übergeben werden müssen eben Werte für die Variablen name, wert und
//verfall. In unserem Beispiel geschieht dies bei Aufruf der cookiesetzen-
//Funktion als Methode aus der function news heraus, bei der die Konkreten
//Werte mit übergeben werden (also name="cookie_news",
//wert=wasdas="heutenicht", verfall=ranzig, d.h. das morgige Datum, welches
//noch in einen GMT-String umgewandelt werden muss.

function cookiesetzen(name, wert, verfall)
{
window.document.cookie= name + "=" + escape (wert) + "; expires=" + verfall.toGMTString();
}
// --></script>

Tipp für Fortgeschrittene: Sie könnten die var ranzig, also das Verfallsdatum auch anders definieren: z.B. als Tag des Updates der Newsseite. Sie können dies mit der Eigenschaft window.document.lastModified erreichen. Allerdings müssten Sie dann das Cookieskript auf der Newsseite unterbringen (dazu am besten im Hintergrund bzw. via Minifenster öffnen lassen, bei nicht verfallenem Cookie gleich wieder schließen lassen, bei verfallenem Cookie, d.h. bei Vorliegen einer neuen Seitenversion via window.resizeTo()-Befehl vergrößern und via focus() -in den Vordergrund bringen. Probieren Sie's aus!

Obiges Skript ist durch die Verwendung der split()-Methode also ziemlich einfach, die Erklärung aber evtl. umso komplizierter. Also am besten einfach ausprobieren.

Oder doch hier die Zusatzerklärung lesen:

Der Splitbefehl teilt einen String an durch das/die als Parameter übergebenen Zeichen in mehrere Unterstrings und legt diese als Arraywerte ab, also z.B.:

var stringbeispiel="Hallo, dies ist ein Beispiel";
var splitarray = stringbeispiel.split(" ");

der dadurch geschaffene Array splitarray hat folgende Werte:

splitarray[0] = "Hallo,";
splitarray[1] = "dies";
splitarray[2] = "ist";
splitarray[3] = "ein";
splitarray[4] = "Beispiel";

In diesem Beispiel war der Trennparameter für die split-Methode das Leerzeichen (split("parameter") funktioniert übrigens erst ab JavaScript 1.1, aber ich denke, dass kein User mehr die Urbrowser (Netscape 2.0 etc.) verwendet, die dies noch nicht umsetzen können.

Einen Gesamtcookiestring können wir nicht darstellen lassen (vgl. dazu aber die Erläuterungen auf der vorigen Seite, d.h. Anlage 14), er besteht jedoch aus mit Istgleichzeichen verbundenen Wort bzw. Zeichenpaaren, die immer wieder durch Strichpunkt-Leerzeichen voneinander abgetrennt werden. Ein einzelner Cookie besteht aus mehreren (mindestens 2) solcher durch Strichpunkt-Leerzeichen getrennter Teile.

In unserem konkreten Cookie-Beispielo wird also im Prinzip unser Gesamtcookie-String in Einzelteile jeweils bei dem übergebenen Parameter für die Split-Methode (also bei uns: Strichpunkt-Leerzeichen) zerlegt. Damit werden allerdings auch einzelne Cookies auseinandergerissen, da die Verfallsdaten eines Cookies in einem anderen Arraywert bleiben (s.u.). Wir bekommen also in obigem Cookiebeispiel eine Latte von Arraywerten in unserem Array keksbrocken, wobei mindestens doppelt soviele Arraywerte wie Cookies auftreten (die Variable Brockenlzahl entspricht damit nicht der Anzahl der tatsächlich vorhandenen Cookies, sondern der Anzahl der durch die Split-Methode aufgeteilten Teilstücke, also keksbrocken). Wichtig ist jedoch, dass die Namen-Werte-Paare der einzelnen cookies zusammenbleiben, da sie mit dem Istgleich-Zeichen verbunden sind. Es wird also in keksbrocken viele Arraywerte geben (mindestens doppelt soviel als überhaupt Cookies vorhanden sind), die das Istgleichzeichen enthalten (nicht alle davon sind aber Namen-Werte-Paare, siehe unten). Diese können wir wiederum splitten und zwar diesmal mit dem Istgleich-Zeichen.

Damit bekommen wir für die Arraywerte von keksbrocken (nehmen mir mal an z.B. für keksbrocken[0], keksbrocken[1] und keksbrocken[2]) nach dem istgleich-Zeichen gesplittete Unterarrays.

Im Einzelnen:

Die split("; ")-Methode, angewandt auf einen vorhandenen Gesamtcookiestring könnte folgenden Array ergeben:

keksbrocken[0]="zaehler=25";
keksbrocken[1]="expires=3404929224";
keksbrocken[2]="cookie_news=heutenicht";
keksbrocken[3]="expires=4445969698";
usw....

Wir splitten danach weiter:

keksbrocken[0] = "zaehler=25";

Splitten beim Istgleichzeichen ergibt die Unterarraywerte

gesuchterCookie[0]="zaehler";
gesuchterCookie[1]="25";

Das war nun nicht der gesuchte Cookie. Also weiter:

keksbrocken[1]="expires=3404929224";

auch dieser wird durch die nachfolgende Split-Methode am Istgleich-Zeichen zerlegt, so dass folgender Unterarray vorliegt:

gesuchterCookie[0]="expires";
gesuchterCookie[1]="3404929224";

da wir aber nach keinem Cookie namens expires suchen, wird dieses Unterarray einfach unberücksichtigt gelassen. Tatsächlich liegt ja auch kein Namen-Werte-Paar vor. Wie Sie sehen, bekämen wir nur ein Problem, wenn wir Cookie-Namen mit reservierten Wörtern belegen (also wie z.B. expires oder path etc.). Am besten also die Cookienamen schön blumig oder in Deutsch halten, dann gibt es keine Probleme. Also weiter:

keksbrocken[2]="cookie_news=heutenicht";

via Istgleich-Parameter weiter gesplittet in die Unterarray-Werte;

gesuchterCookie[0] = "cookie_news";
gesuchterCookie[1] = "heutenicht";

Also, wenn nun der Unterarraywert gesucherCookie[0] mit dem Suchbegriff abgetestet wird, finden wir unseren gesuchten Cookie und können den Cookiewert "heutenicht", der sich in Unterarraywert gesuchterCookie[1] befindet, zurückgeben.

Alles klar?

Weitere Hinweise:

1. Returnwerte: In obigem Beispiel wird der Wert des gesuchten Cookies (gespeichert in gesuchterCookie[1]) als return-Wert zurückgegeben. Für unsere Zwecke müsste dies in obigem Beispiel nicht unbedingt geschehen. Es könnte bei gefundenem Cookie auch der Name des Cookies (gesuchterCookie[0]) oder irgend ein x-beliebiger Wert zurückgegeben werden (z.B. "vorhanden", "1" oder true), eben nur nicht null. Nur bei Rückgabewert null wird ja die if-Schleife durchlaufen und das Newsfenster geöffnet. Ich belies das Skript aber so vollständig, damit Sie ggf. mit dem Rückgabewert anderes anfangen können (z.B. den Rückgabewert für einen location.href-Befehl verwenden, wie es in Anlage 14, Beispiel Cookie3, erläutert wurde).

2. Anlegen lokaler Cookies: Ein Cookie besteht wie oben geschildert wenigstens aus zwei via semicolon-leerzeichen abgetrennten Teilstrings, nämlich dem Cookienamen=Cookiewert-Paar, sowie dem expires-Verfallsdatum-Paar. Wenn beim Setzen des Cookies auch noch ein Pfad angegeben wird, sind es bereits drei (path-Pfadangabe-Paar). Wird ein Pfad gesetzt, gilt das Cookie nicht für die gesamte Website bzw. angegebene IP-Nummer sondern nur für das im Pfad angegebene Verzeichnis samt seiner Unterverzeichnisse. So können Sie also auch Cookies anlegen, die nur "räumlich" begrenzt aktiv werden. Das Ganze geht z.B. folgendermaßen:


function cookesetzen (name, wert, verfall) {
document.cookie = name + "=" + escape (wert) +
"; expires=" + verfall.toGMTString() + "; path=/multimediakurs/javascript";
}

Die Werte für die Variablen wert und verfall müssen natürlich wie in unserem obigen Beispiel beim Aufruf der Funktion mit übergeben werden.

Das Skript für Beispiel Cookie 4 basiert wiederum auf einem Doppelbeispiel aus dem JavaScript-Buch von M.Seeboerger, welches ich entsprechend vereinfacht habe und mit obigen Erklärungen versehen habe (sowie die split-Methode nach semikolon+Leerzeichen suchen lasse, ansonsten funktioniert das Ganze beim Vorhandensein mehrerer Cookies u.U. nicht). Das Skript hat den Vorteil, auch beliebig viele Cookies mit einem Aufruf setzen zu können, es muss nur ein weiterer Aufruf der Funktion cookiesetzen() geschehen, bei dem dann entsprechend andere Parameterwerte für name, wert, verfall mit übergeben werden. So könnte etwa auch noch die Häufigkeit des Seitenbesuchs des jeweiligen Nutzers per Cookie festgehalten werden. Alternativ oder zusätzlich könnte z.B. via Link das entsprechend gesetzte Cookie auf Wunsch des Benutzers gleich wieder gelöscht werden, falls er ggf. noch am selben Tag aktualisierte News sehen möchte. Der Code könnte dazu lauten:

<a href="javascript:cookiesetzen('cookie_news', wasdas, new Date(1970, 01, 01))">Cookie wieder l&ouml;schen?</a

Wasdas muss als globale Variable definiert sein, um sie hier wieder verwenden zu können.

Einen entsprechenden Cookielösch-Link habe ich auf Beispiel Cookie 4 eingebaut.

Beispiel Cookies 5: Gemeinsames Setzen und Auslesen zweier Cookies (u.a. via Split-Methode)

M. Seeboerger-Weichselbaum hat uns dankenswerterweise für den Kurs erlaubt, sein entsprechendes Skript zum Setzen und Auslesen zweier Cookies direkt zu nutzen ;-) Hier ist das entsprechende Beispiel (auch hier habe ich den Parameter für die Split-Methode von ";" auf "; " geändert, vgl. oben).

Sehen Sie sich die Sourcecodes der Skripte an.

Wenn Sie das Skript weiterverwenden wollen (nur für nichtkommerzielle Seiten gestattet), geben Sie bitte Herrn Seeboerger-Weichselbaum als Autor an, Referenz siehe hier.

<< Anlage 14: Cookies

© R. Leinfelder und Paläontologie München, letzte Änderung 28.03.2003

Inhaltsseite

Anlagenverzeichnis