Verwendung von Browser-Cookies in Javascript

0

Wie Sie eventuell bemerkt haben, kann man auf meiner Website die Liste mit Kommentaren – sofern welche vorhanden sind – unterhalb eines Artikels mithilfe eines Buttons anzeigen oder verstecken. Dies geschieht über ein recht einfaches Script, basierend auf der freien Javascript Bibliothek jQuery. Diese Funktion ist zwar ganz praktisch, hatte bisher aber den großen Nachteil, dass die Kommentare beim Klick auf “Verstecken” nur so lange nicht mehr angezeigt wurden, bis die Seite neu geladen wurde oder man auf eine andere Seite gewechselt hat. Nun bin ich jedoch auf eine interessante Möglichkeit gestoßen, mit der man beispielsweise den Zustand eines solchen Elements speichern kann.

Das Stichwort heißt Browsercookie. Über ein solches Cookie, das dynamisch angelegt werden kann, kann eine Information (z.B. der Zustand der Kommentar-Liste) über einen langen Zeitraum gespeichert werden. Im Regelfall beträgt dieser Zeitraum 365 Tage, vorausgesetzt der User löscht das Cookie nicht vorher manuell. Im Falle des Kommentar-Togglers wird beim Klick auf “Verstecken” ein Cookie mit einem beliebigen Namen und dem Wert closed angelegt. Beim nächsten Aufruf der Seite prüft das Script zunächst, ob ein Cookie mit dem entsprechenden Namen und dem Wert closed vorhanden ist. Ist das der Fall wird die Kommentarliste sofort wieder ausgeblendet, denn der User hat scheinbar zu einem früheren Zeitpunkt schon einmal auf “Verstecken” geklickt, ansonsten gäbe es kein solches Cookie. Existiert das Cookie nicht, wird die Liste ganz normal angezeigt.

1) Einbinden des Cookie-Plugins

Von Haus aus verfügt die jQuery-Bibliothek nicht über die Möglichkeit, Cookies zu verwalten. Deshalb muss hierfür ein Plugin installiert werden. Ich nutze für mein Script dieses Plugin. Es gibt zwar noch weitere Plugins, diese haben bei mir jedoch nicht funktioniert (ich vermute allerdings, dass der Fehler bei mir und nicht im Plugin lag).

Zum Einbinden des Plugins laden Sie zunächst die Quelldatei herunter und kopieren sie in Ihr Projektverzeichnis. Nun können Sie die Datei über folgenden Code in Ihr Projekt einbinden.

<script type="text/javascript" src="pfad/zur/datei/jquery.cookies.2.2.0.js"></script>

Sofern Sie das Plugin innerhalb von WordPress verwenden wollen, sollten Sie statt des oben stehenden Codes, besser auf die Funktion wp_enqueue_script() zurückgreifen. Im Endeffekt erfüllen beide Code-Snippets jedoch ihre Aufgabe und binden das Plugin ein.

wp_enqueue_script('jquery-cookie-plugin', get_template_directory_uri() . 'pfad/zur/datei/jquery-cookies.js');

2) Lesen, Schreiben und Löschen von Cookies

Ist das Plugin eingebunden, stehen Funktionen zum Lesen, Schreiben und Löschen eines Cookies zur Verfügung. Möchten Sie beispielsweise ein Cookie mit dem Namen “toggle-state” und dem Wert closed erstellen, sieht die Funktion folgendermaßen aus.

$.cookies.set('toggle-state', 'closed');

Soll dasselbe Cookie wieder gelöscht werden, kommt diese Funktion zum Einsatz.

$.cookies.del('toggle-state');

Zum Lesen des Cokies verwenden Sie diese Funktion.

$.cookies.get('toggle-state');

Soll beispielsweise geprüft werden, ob das Cookie “toggle-state” den Wert closed hat, so sähe die Überprüfung innerhalb einer if-Abfrage wie folgt aus.

if($.cookies.get('toggle-state') == 'closed'){
    //mache irgendetwas
}

Das waren auch schon alle grundlegenden Funktionen, die man benötigt, um mit Cookies zu arbeiten und client-spezifische Inhalte über einen längere Zeiträume zu speichern. Darüber hinaus bietet das Plugin natürlich noch einige weitere Funktionen, die in der Dokumentation nachzulesen sind.

3) Praktische Anwendung von Cookies

Im ersten Abschnitt habe ich bereits vom Kommentar-Toggler erzählt. Dessen Code sehen Sie im nachfolgenden Code-Snippet. Im Prinzip setzt sich das Script aus zwei Funktionen zusammen. Die erste Funktion bestimmt, was passiert, wenn der Toggle-Button gedrückt wird. Hier wird die Kommentar-Liste abwechselnd auf- und zugeklappt und mit den zusätzlichen Klassen active bzw. inactive versehen, um die Gestaltung per CSS ändern zu können. Der für diesen Artikel interessante Teil liegt darin, dass bei jedem Klick auf den Toogle-Button neben der Sichtbarkeit der Kommentare auch der Wert des Cookies mit dem Namen “toggle-state” zwischen opened und closed hin- und herwechselt.
Der zweite Teil des Scripts prüft nun bei jedem Neuladen der Seite, ob das Cookie “toggle-state” den Wert closed hat. Ist das der Fall, werden die Kommentare noch während des Pageloads ausgeblendet. Hat das Cookie jedoch den Wert opened oder existiert erst gar nicht, werden die Kommentare normal angezeigt. Auch im zweiten Teil der Funktion werden wieder die Klassen active und inactive gesetzt.

// Toogle comments box and safe current state in browser cookie
$(document).ready(function(){

	$('#toggle-comment').click(function(){
		if($(this).hasClass('active')){
			$(this).removeClass('active');
			$(this).addClass('inactive');
			$.cookies.set('toggle-state', 'closed');
			$('#commentlist').stop(true, true).slideUp();
			return false;
		}
		else{
			$(this).removeClass('inactive');
			$(this).addClass('active');
			$.cookies.set('toggle-state', 'opened');
			$('#commentlist').stop(true, true).slideDown();
			return false;
		}
		
	});
		
	if( $.cookies.get( 'toggle-state' ) == 'closed'){
		$('#toggle-comment').removeClass('active');
		$('#toggle-comment').addClass('inactive');
		$('#commentlist').hide();
	}
	else{
		$('#toggle-comment').removeClass('inactive');
		$('#toggle-comment').addClass('active');
		$('#commentlist').show();
	}

});

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.