5202

ein Blog über technische Fragen zu Blogger

Ein Seitenaufruf Counter für Blogger

von

Ihr habt auf Blogger bekanntlich keinen Zugriff auf eine Server-Datenbank - wäre aber für manche Probleme sehr nützlich, oder? Ihr wollte zB. ein Hinweis einblenden, den ein Besucher nach dem dritten Aufruf von eurem Blog nicht mehr zu sehen bekommt ... klingt cool ... aber dazu müsst ihr Userdaten irgendwo speichern können.

Um Daten Clientseitig zu speichern, könntet ihr nun entweder einen Cookie setzen ... oder ihr geht über die HTML5 API und speichert das ganze als WebStorage-Objekt. Klingt ziemlich kompliziert ... ist es aber nicht :).

Schaut euch mein Beispiel an - auf der Skizze läuft ein Counter, der bei jedem Seitenaufruf um 'eins' nach oben zählt ... ihr könnt euren Browser schließen und neu öffnen, der Zählerstand bleibt gespeichert.

Webstorage

Ich spiele zwar gerne den Erklärbär, aber in dem Fall könnt ihr euch anderswo mal schlau machen, was Webstorage überhaupt ist.

Vereinfacht gesagt, könnt ihr damit Daten direkt im Browser eurer Besucher speichern und zwar mit Javascript. Ihr braucht dazu im Grunde nur folgende drei Befehle:

localStorage.setItem(key, value)  //Setzt einen Wert mit Schlüssel
localStorage.getItem(key, value)  //Holt einen Wert mit Schlüssel 
localStorage.removeItem(key) //Löscht den entsprechenden Schlüssel

Daraus habe ich nun eine kleinen Counter gebaut - das ganze erst mal 'pur', ohne Kommentare.

 function counts(){
    str_count = localStorage.getItem("count");
    if (str_count == null || str_count == "null"){
      count = 0;
    } else {
      count = parseInt(str_count);
    } 
    count++;
    Counter = document.getElementById("counter");
    Counter.innerHTML = "Du warst   " + count + " mal auf dieser Seite";
    localStorage.setItem("count", count);
  } 

Und mit Kommentar:

 function counts(){
    //
   //Ihr definiert eine Variable str_count als String [Zeichenkette]
  //
    str_count = localStorage.getItem("count");
    //
   //Ihr überprüft, ob die Variable einen Wert hat
  //
    if (str_count == null || str_count == "null"){
      count = 0;
    //
   // Wenn 'Nein', setzt ihr einen numerischen Wert '0'
  //
    } else {
      count = parseInt(str_count); 
    //
   //Wenn 'Ja', gebt ihr den String als numerische Variable zurück
  //
    } 
    //
   //Ihr erhöht die Variable um 1
  //
    count++;
    //
   //Ihr zeigt den Counter an
  //
    Counter = document.getElementById("counter");
    Counter.innerHTML = "Du warst   " + count + " mal auf dieser Seite";
    //  
   //Ihr speichert die Variable als Webstorage Objekt
  //
    localStorage.setItem("count", count);
  } 

Das ist natives Javascript - man könnte es auch in jQuery schreiben, aber ich habe gerade mal wieder Lust, mich in Javascript zu üben.

Ähm ... und was kann ich damit anfangen?

Wie ihr seht, funktioniert das Script - in der Skizze zählt der Counter fleißig vor sich hin.Als Ergebnis gibt das Script nun eine numerische Variable 'count' zurück, das ihr in einer weiteren einfachen Schleife einsetzen könntet:

if(count > 4) {
 //do something cool;
}
else if(count == 4) {
 //do something cooler;
}
else {
 //do the coolest thing;
}

Damit könntet ihr das Verhalten eurer Seite auf Besucher mit weniger als Besuche, 4 Besuche und mehr als 4 Besuche anpassen ... einfach und smart mit ein paar Zeilen Javascript!

Weitere Posts

Anwendungsfall?

Was meint ihr dazu? Ich habe im Hinterkopf einen ganz konkreten Problem, wo ich das mal ausprobieren wollen würde ... habt ihr auch Ideen dazu? Oder ist das nur eine Spielerei

?