HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » JavaScript » JavaScript Artikel » Cookies in JavaScript

JavaScript Artikel: Cookies in JavaScript

von Jan Winkler

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.

Anzeige

Was sind Cookies?  nach oben

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  nach oben

Java Script bietet zum Speichern von Cookies die document.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 ausserdem noch das Verfallsdatum angegeben werden. Dies geschieht mit dem zusätzlichen expires= 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()+';'; 

Im Beispiel wird ein 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  nach oben

Die gespeicherten Cookies können ebeneso wie sie geschrieben werden auch über die document.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  nach oben

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  nach oben

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; 

Auch das Auslesen mehrerer Werte ist ebenso einfach: Der oben beschriebene Algorithmus muss nur etwas erweitert werden. Beispiel:

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  nach oben

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()}



« zurück weiter »
Bewerten

Aus dem JavaScript Artikel Forum ...

zum JavaScript Artikel Forum »

 

JavaScript Artikel

.Autor:Jan Winkler.
. Bewertung:
JavaScript Artikel: Cookies in JavaScript HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 24 Beiträge im JavaScript Artikel Forum .

Navigation

Software - Entwickler (m/w) Java / GIS – Stuttgart von Job Ambition GmbH
PHP - Entwickler (m/w) - Standort Köln von Job Ambition GmbH
PHP - Entwickler (m/w) - Offenbach am Main von Job Ambition GmbH
Web-Developer (m/w) – am Standort Bühl von Job Ambition GmbH
[B] Individuelle Texterstellung – Unique Content zu fairen P von texttown
Senior PHP-Programmierer (m/w) – Raum Köln von Job Ambition GmbH
html-Datei in Container nachladen von Piwi
Wie ticken Web-Entwickler eigentlich im Social Web? von Job Ambition GmbH
Gesucht: Senior PHP-Programmierer (m/w) – am Standort Köln von Job Ambition GmbH
Achtung: Seite ist nicht mehr gültig von Sir Quicksand
Excel-Spalte auslesen in txt. speichern. von n_o.o_ b
(Junior) Java Entwickler (m/w) - am Standort Stuttgart von Job Ambition GmbH
Stellen hinter dem Komma Abfragen und ändern. von Beckers
Re: Undefined variable - bitte um Hilfe von admin
Wie erstelle ich eine Tag-Wolke aus Flash? von Suesse_Muse

zum Forum »


 
     
 

Anzeige