Cookies in JavaScript
Mit Cookies lassen sich Informationen beim Besucher speichern und später wieder abrufen. Wie Sie damit umgehen und was Sie damit anstellen können, zeigt der folgende Artikel.Was sind Cookies?
Cookies sind kleine Dateien, die vom Browser gespeichert werden können. Darin kann die Website Informationen ablegen und später gegebenfalls wieder auslesen. Dabei gibt es zwei Varianten, wie Cookies gesetzt werden können: per HTTP oder per ( Java )Script. In beiden Fällen entnimmt der Browser die Informationen und speichert sie mit einer ID sowie dem Ablaufdatum versehen in einer externen Datei. Ist ein Cookie gespeichert, kann die Webseit wiederum auf das Gespeicherte zugreifen (sofern das Verfallsdatum noch nicht erreicht wurde) und weiter verwenden. Die Werte innerhalb eines Cookies haben immer die Form[Name]=[Wert];.
Cookies speichern
Java Script bietet zum Speichern von Cookies diedocument.cookie-Eigenschaft. Gespeichert wird das Cookie durch eine einfache Zuweisung des zu Speichernden auf die Eigenschaft. Beispiel:
document.cookie = 'name=wert;';
So ist das Cookie (nur) während der Laufzeit der aktuellen Seite zugänglich. D.h. sobald eine neue Seite aufgerufen wird, wird auch das Cookie wieder entfernt. Um die Werte dennoch über einen längeren Zeitraum speichern zu können, muss neben dem Namen und dem Wert außerdem noch das Verfallsdatum angegeben werden. Dies geschieht mit dem zusätzlichenexpires= Eintrag am Ende des eigentlichen Cookies. Als Wert wird ein Datum übergeben, wann der Cookie abgelaufen ist. Beispiel:
var a = new Date();
a = new Date(a.getTime() +1000*60*60*24*365);
document.cookie = 'meincookie=meinwert; expires='+a.toGMTString()+';';
Date-Objekt erstellt. Dessen Wert wird auf jetzt (a.getTime()) plus ein Jahr (1000 Millisekunden mal 60 Sekunden mal 60 Minuten mal 24 Stunden mal 365 Tage) gesetzt. Anschließend wird der Cookie mit dem Datum gespeichert.
Cookies auslesen
Die gespeicherten Cookies können ebeneso wie sie geschrieben werden auch über diedocument.cookie-Eigenschaft ausgelesen und bearbeitet werden. Um zu prüfen, ob ein Cookie gespeichert wurde reicht eine einfache if-Bedingung, in der geprüft wird, ob das Objekt ansich existent ist. Beispiel:
if(document.cookie){ machwas(); }
Diese Abfrage sollte allgemein immer vor dem Auslesens eines Cookies geschehen. Andernfalls ist es allerdings auch nicht bedenklich sie weg zu lassen, da dann anstelle des Cookies einfach ein leerer String übergeben wird.Ein Cookie kann wie ein normaler String gelesen und bearbeitet werden. Um die Namen und Werte des Cookies voneinader zu trennen kann z.B. der folgende Algorithmus verwendet werden:
a = document.cookie;
cookiename = a.substr(0,a.search('='));
cookiewert = a.substr(a.search('=')+1,a.search(';'));
if(cookiewert == '')
{cookiewert = a.substr(a.search('=')+1,a.length);}
Cookies löschen
Zum einen Cookie zu löschen gibt es keine eindeutige Beschreibung allerdings kann man sich mit einfachen Tricks behelfen. Das Löschen wird dabei nicht selbsständig vorgenommen sondern dem Browser überlassen. Dazu wird das Ablaufdatum des betreffenden Cookies einfach in die Vergangenheit gesetzt. Beispiel:document.cookie = 'meincookie=meinwert; expires=Thu, 01-Jan-70 00:00:01 GMT;';
//01.01.1970 sollte schon lange vorbei sein ...
Mehrere Werte speichern
Wie man einen Wert speichern kann, wissen wir. Was aber wenn mehrere Werte gespeichert werden sollen? Nichts einfacher als das! Das ganze funktioniert ebenso wie das Speichern eines Wertes nur mit dem Unterschied, dass das Speichern mit den anderen Werten wiederholt wird. Beispiel:wert1 = 'wert1=abc;';
wert2 = 'wert2=def;';
wert3 = 'wert3=ghi;';
document.cookie = wert1;
document.cookie = wert2;
document.cookie = wert3;
a = document.cookie;
cookiename1 = a.substring(0,a.search('='));
cookiewert1 = a.substring(a.search('=')+1,a.search(';'));
if(cookiewert1 == '')
{cookiewert1 = a.substring(a.search('=')+1,a.length);}
a = a.substring(a.search(';')+1,a.length);
cookiename2 = a.substring(0,a.search('='));
cookiewert2 = a.substring(a.search('=')+1,a.search(';'));
if(cookiewert2 == '')
{cookiewert2 = a.substring(a.search('=')+1,a.length);}
// ...
Besucherbegrüßung
Eine nette - wenn auch manchmal nervende - Spielerei mit Cookies ist das merken des Besuchernamens sowie das anschließende wiedererkennen des Besuchers und eine entsprechende Begrüßung. Alles was dazu benötigt wird ist der ausgefragte Name der gespeichert werden muss. Später wird er einfach wieder ausgelesen und in den Begrüßungstext eingebaut. Beispiel:function Schreiben(n,w,e)
{
var a = new Date();
a = new Date(a.getTime() +e);
document.cookie = n+'='+w+'; expires='+a.toGMTString()+';';
}
function Lesen(n)
{
a = document.cookie;
res = '';
while(a != '')
{
cookiename = a.substring(0,a.search('='));
cookiewert = a.substring(a.search('=')+1,a.search(';'));
if(cookiewert == '')
{cookiewert = a.substring(a.search('=')+1,a.length);}
if(n == cookiename){res = cookiewert;}
i = a.search(';')+1;
if(i == 0){i = a.length}
a = a.substring(i,a.length);
}
return(res)
}
function Loeschen(n)
{
document.cookie = n+'=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}
text = 'Willkommen %1 auf unserer Homepage!';
function NameMerken()
{
a = prompt('Hallo Besucher. Bitte geben Sie Ihren Namen ein.');
Schreiben('username',a,1000*60*60*24*365);
NameHolen();
}
function NameHolen()
{
if(document.cookie)
{
username = Lesen('username');
if(username != '')
{
b = text.replace('%1',username);
document.writeln(b);
}
}
else{NameMerken()}
}
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project