Lesen und Schreiben von Cookies in Javascript Tutorial - Kostenlose Homepage Tools für deine Homepage auf ntmb.de

Lesen und Schreiben von Cookies in Javascript

Cookies können auch clientseitig durch Javascript verarbeitet werden.

9697 - ntmb - 07.02.2010 18:28 Uhr - Version: 2 - - verlinken als BB-Code

Allgemein

Viele Seiten im Internet zeigen wie man Cookies per Javascript editiert, leider sind die Vorzeige-Scripts bei einer Vielzahl der Seiten mit Fehler behaftet.

Ich möchte euch gerne erklären wie die Verarbeitung der Cookies per Javascript funktioniert, hierzu probiere ich auch fehlerfreie Vorzeige-Scripts zu schreiben.

In JavaScript gibt es das folgende Objekt document.cookie.
In diesem Objekt sind alle Cookies der aktuellen Seite zu sehen. Die einzelnen Cookies sind per Semikolon getrennt.

So würde der Inhalt des Objektes beispielhaft aussehen:
Cookie1=Wert123; Cookie2=WertXY; Cookie3=WertABC

Zu beachten ist, dass am letzten Cookiewert kein Semikolon steht!
Wenn am Objekt nur ein Cookie hinterlegt ist, dann hat auch dieser kein Semikolon.

Cookies auslesen

Um aus dem obigen Beispiel den ,,Cookie2" auszulesen, erfordert es ein durchfliegen des Textes vom Objekt.

Der Text wird von links nach rechts durchgegangen.

Der Text muss in seine einzelnen Bereiche zerteilt werden, welches durch die Methode substring(START, ENDE) erfolgt. START gibt hierbei an, ab welchen Zeichen im Text der Auszug beginnt. ENDE sagt aus bis zu welchen Zeichen der Auszug ist. Die Werte sind nullbasiert, das heißt man fängt bei 0 an und nicht bei 1.

Wir suchen im Text nach dem ersten Vorkommen des Zeichens ,,=", dies erfolgt durch die Methode search(ZEICHEN). Wenn das gewünschte Zeichen nicht gefunden werden konnte ist der Rückgabewert der Methode -1.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <script type="text/javascript"> function CookieLesen(n) { a = document.cookie; while(a != ''){ cookiename = a.substring(0,a.search('=')); cookiewert = a.substring(a.search('=')+1,a.search(';')); // wenn es der letzte Parameter ist if(cookiewert == cookiename+'='){ cookiewert = a.substring(a.search('=')+1,a.length); } if(cookiename == n){ return cookiewert; } // vorderen Teil abschneiden i = a.search(';'); if(i == -1){ // nicht gefunden i = a.length } else{ i += 2; } a = a.substring(i,a.length); } return ''; } </script>

Im Script wird eine WHILE-Schleife angesteuert/durchlaufen, solange ,,a" nicht leer ist.
Anschließend wird der Cookiename ausgelesen und in eine Variable gespeichert.

Darauf folgend wird der Cookiewert ausgelesen, der nach dem Cookienamen und den Gleichheitszeichen angesiedelt ist. Das Herausfiltern ist etwas schwierig zu betrachten, da man nicht immer sagen kann das ein Cookie Wert immer zwischen einem Gleicheitszeichen und einem Semikolon stehen muss. (Siehe Erklärung oben)
Es wird probiert zwischen einem Gleichheitszeichen und einem Semikolon zu suchen, wenn dies nicht funktioniert, dann ist der Wert gleich Cookiename plus Gleichheitszeichen. Wenn dieser Wert zutrifft, wird der restliche Text nach dem Gleichheitszeichen für den Wert genommen.

Nachfolgend wird überprüft, ob der gewollte Cookiename mit dem gewünschten Cookiename (n) übereinstimmt. Falls dies zutrifft wird der aktuell ausgelesene Wert von der Methode zurückgeworfen (return) und das Script ist abgearbeitet.

Wenn der passende Cookiename nicht dabei war, wird nach einem Semikolon gesucht und an dortiger Stelle abgeschnitten. Zu beachten ist, dass zwei Zeichen zusätzlich einbezogen werden, die das Semikolon an sich und ein Leerzeichen darstellen.

Wenn ein Semikolon nicht gefunden werden kann wird der komplette Wert nach dem Gleichheitszeichen genommen, dieser Bereich würde bei dem letzen Wert angesteuert werden.

Der aktuelle Wert wurde somit aus dem Text entfernt.

Da die Variable nun etwas schlanker ist, aber noch nicht leer wird die While-Schleife erneut angesteuert.

Unser Cookie2 wird verarbeitet und der Wert ,,WertXY" wird zurückgegeben.

Wenn der gewollte Cookie nach allen Abläufen nicht gefunden werden kann, wird eine leere Textfolge zurückgegeben.

Cookies schreiben

Cookie zu schreiben gestaltet sich dagegen relativ simpel. Man muss das vorherig erwähnte Objekt mit einem Wert belegen.

1 2 3 4 5 6 7 <script type="text/javascript"> function CookieSchreiben(n,w) { a = new Date((new Date()).getTime() +1000*60*60*24*365); // 1 Jahr document.cookie = n+'='+w+'; expires='+a.toGMTString()+'; path=/'; } </script>

,,n" stellt den Cookienamen dar und ,,w" den gewünschten Wert.
Der Parameter expires in document.cookie sagt die Lebensdauer aus, hierbei wäre es ein Jahr. Dies wird mit dem erstellten/bearbeiten Cookie verknüpft. Wenn man expires nicht mit angibt, dann verfällt der Cookie dementsprechend schnell.

Versuchslabor

Wer fleißig war, darf auch gerne Spielen. Ich möchte euch zum Schluss ein kleines Anwendungsbeispiel zeigen.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> function CookieText(){ CookieName='CookieA'; CookieWert=CookieLesen(CookieName); CookieWert++; if(CookieWert==1) { alert('Cookie erstellt!'); } document.write(CookieWert); CookieSchreiben(CookieName,CookieWert) } CookieText(); </script>

Damit alles klappt müsst ihr alle 3 Codeauszüge schön in Reihenfolge in eine HTML-Datei einfügen.

Ich hoffe ich konnte euch das Arbeiten mit Cookies unter Javascript näher bringen.

Über das ein oder andere Kommentare von euch würde ich mich natürlich freuen.

Gruß
Eugen

Mitglieder-Kommentare

#2 von ntmb

Hm ne, gibt doch aber freie Bildquellen.
Würde es gut finden wenn du mehr auf das Tutorial eingehen würdest, als auf das Bild mit dem Keks

Der freundliche Admin aus der Nachbarschaft
Lachecke.de - Dein täglicher Lacher im Internet
Listrank.de - Die ultimative Topliste nach Themen

#1 von lucas

hast du das Bild selber gemacht ?
Wenn es die Kekse sind die ich meine dann guten Appetit ^^

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)