In diesem Beitrag möchte ich zeigen, wie man auf einfachem Weg Cookies mit Javascript durch das Framework jQuery verwalten kann. Durch das Einbinden von jQuery und einem zusätzlichen Plugin, lassen sich Cookies mit einfachen Befehlen erstellen, auslesen und löschen.
jQuery Cookie in eine Website einbinden
Zuerst muss man die nötigen Scripte in die eigene Website einbinden, dazu gehört als erstes jQuery selber und dann noch das jQuery Cookie Plugin. jQuery kann man auf der Entwickler Website downloaden oder direkt über die Google API einbinden. In diesem Beitrag nehme ich als Beispiel die Einbindung über die Google API.
Die Einbindung von jQuery sieht dann folgendermaßen aus:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
Als nächstes muss jetzt noch das Plugin für die Cookie verwalten eingesetzt werden. Dieses Plugin wurde von Klaus Hartl entwickelt und ist auf Github zu finden. Leider ist das Plugin nicht in einer komprimierten Version veröffentlicht worden aber da das Script an sich ziemlich klein ist, kann man auch die unkomprimierte Version benutzen.
Das jQuery Cookie Plugin einbinden:
<script src="(Pfad zum Plugin)/jquery.cookie.js" type="text/javascript"></script>
Mehr muss man nicht tun, um Cookies per jQuery zu steuern. Durch die Einbindung der beiden Dateien bekommt man eine Reihe von Befehlen, durch die man Cookies mit wenig Aufwand verwalten kann.
Cookies setzen, auslesen oder löschen
Nun will ich auf die einzelnen Befehle zur Steuerung der Cookies eingehen. Wie oben bereits erwähnt funktioniert die verwalten ziemlich einfach, es gibt eine Reihe von Funktionen die einem die Arbeit abnehmen, man muss lediglich die passenden Paramater übergeben.
Ein neues Cookie setzen:
Hier ein Codebeispiel um ein neues Cookie über jQuery zu erstellen:
$.cookie('cookie_name', 'cookie_wert');
In diesem Beispiel wird ein neues Cookie über den Befehl $.cookie erstellt. Als Parameter wird zuerst der Name des Cookies übergeben und als zweiter Parameter der Wert des Cookies. Es gibt noch einen dritten Parameter dem man als Wert ein Javascript-Object übergibt mit weiteren Konfigurationen, z.B. wie lange das Cookie gültig sein soll.
Hier ein Beispiel wie der Aufruf mit erweiterten Parametern aussieht:
$.cookie('cookie_name', 'cookie_wert', { expires: 7, path: '/' });
Als dritter Parameter wurde ein Javascript-Object übergeben. In diesem sind 2 Werte definiert – expires und path. Der Wert für expires gibt an, wie lange das Cookie gültig sein soll, der Wert wird in Tagen angegeben wie z.B. oben 7 = gültig für 7 Tage. Der Wert für path gibt die zugehöriges des Cookies zu einer Unterseite an – im Beispiel oben ist einfach nur ein Slash gesetzt, das bedeutet, dass das Cookie für alle Unterseiten gültig sein soll.
Ein einzelnes Cookie auslesen oder alle Cookies ausgeben lassen
Cookies werden mit dem selben Befehl ausgelesen mit welchen auch neue erstellt werden. Der Unterschied zum Erstellen eines Cookies und des Auslesens, ist der das beim Auslesen lediglich der erste Parameter gesetzt wird, also der Cookie Name.
Um ein Cookie auszulesen benötigt man lediglich den Codeschnipsel:
$.cookie('cookie_name');
Als Wert wird dann der Wert des Cookies welches ausgelesen wird zurückgegeben. Es ist auch möglich alle aktiven Cookies auf einmal ausgeben zu lassen, der Aufruf sieht genauso aus wie für ein einzelnes Cookie, man muss lediglich keine Parameter angeben um alle Cookies zu bekommen. Als Wert wird dann ein Javascript-Object ausgegeben. Die Struktur ist so aufgebaut, das der Cookie Name als Schlüssel genutzt wird und der Wert der Wert des Cookies ist.
$.cookie() // ausgabe: { cookie_name: cookie_wert, cookie_name: cookie_wert }
Cookies mit jQuery löschen
Natürlich lassen sich Cookies auch mit jQuery löschen. Dazu gibt es durch das Plugin eine eigene Funktion zum Löschen der Cookies. Um ein Cookie gezielt zu löschen muss man der Funktion lediglich den Cookie Namen übergeben.
Um ein Cookie zu löschen nutzt man folgende Funktion:
$.removeCookie('cookie_name');
Wenn man ein Cookie auch geziehlt anhand eines Pfads löschen will, kann man der Funktion zum Löschen einen zweiten Parameter übergeben. Der zweite Parameter muss ein Javascript-Object sein, indem der Pfad definiert wird. Hier ein Beispiel für:
$.removeCookie('the_cookie', { path: '/' });
Schlusswort zu jQuery Cookie
Das Plugin ist eine sehr nützliche Erweiterung und die Bedienung ist einfach und übersichtlich gehalten. Schade nur das der Entwickler keine komprimierte Form auf Github veröffentlicht hat aber da das Script ansich schon nicht sehr groß ist, kann man das vertragen.
Ich habe das Plugin schon in vielen Projekten verwendet und habe damit bis jetzt nur gute Erfahrungen machen können. Wenn man auf der Suche nach einer guten Möglichkeit ist, Cookies über Javascript zu steuern, ist dieses jQuery Plugin eine super Lösung.
Weiterführende Links:
Ein Kommentar
Hallo Wlad,
toller Beitrag zur Verwendung des Plugins.
Du kannst dir das Plugin für deine Projekte auch selbst komprimieren mit Minify oder auch Online wie z. B. über http://jscompress.com
Beste Grüße
Jonathan