Counter

Die vorige Zeile wurde per Script generiert. Sie können die Seite erneut laden um die Zahl zu erhöhen. Sie können den Browser schließen und später wiederkommen, ihr Ergebnis wird nicht gelöscht.

Script im Head Bereich:

  
<script type="text/javascript">
function pageCounter() {
    if(typeof(Storage) 1== "undefined") {
        if (localStorage.pageCount) {
            localStorage.pageCount = Number(localStorage.pageCount)+1;
        } else {
            localStorage.pageCount = 1;
        }
        document.getElementById("result").innerHTML = "Sie haben diese Seite " + localStorage.pageCount + " mal aufgerufen.";
    } else {
        document.getElementById("result").innerHTML = "Sorry, aber ihr Browswer hat keine Web Storage Ünterstützung.";
    }
}
</script>

Code im Body Tag:

<body onLoad="pageCounter()">

Ausführliche Erklärung für Menschen die des Programmierens unkundig sind:

Es handelt sich hierbei um eine Funktion mit selbstvergebenen Namen pageCounter. Diese Funktion umschließt alles mit geschweiften Klammern. Die geschweiften Klammern umschließen immer einen Anweisungsblock.

function pageCounter(){}

Damit diese Funktion ausgeführt wird, muss sie aufgerufen werden. Das geschieht hier jedesmal wenn die Seite geladen wird im Body Tag mit dem Event Handler onLoad.

<body onLoad="pageCounter()">

in der Funktion pageCounter wird mit if else abgefragt ob WebStorage unterstützt wird. Wenn nicht, erhält das div mit der id="result" einen Hinweis.

if(typeof(Storage) 1== "undefined") {
/*Anweisungen für den Counter*/
}else{
/*Hinweis, dass WebStorage nicht unterstützt wird*/
}

Es gibt auf der Seite ein leeres div mit der id und Wertzuweisung result.
<div id="result"></div>
mit dem DOM kann man darauf zugreifen und mittels innerHtml etwas in den Gültigkeitsbereich schreiben.
document.getElementById("result").innerHTML = "Text im Gülgitkeitsbereich des Elements."

Auf gleiche Weise wird natürlich auch der Wert des Zählers mit dem dazugehörigen Satz geschrieben. Kommen wir nun zu diesem Teil. Auch hier gibt es wieder eine if Struktur, die abfragt, ob die WebStorage Variable mit dem selbstvergebenen Namen pageCount schon gesetzt wurde.

if(localStorage.pageCount){}else{}

Ist dass der Fall wird ihr Wert abgefragt (hinter dem Gleichheitszeichen) localStorage.pageCount Damit dieser Wert als Zahlenwert und nicht als String angesehen wird, wird er mittels Number gecastet. Number(localStorage.pageCount) Desweiteren wird ihr Wert um den Wert 1 erhöht. Number(localStorage.pageCount)+1 Dieser neue Wert wird dem vorhanden zugewiesen.
localStorage.pageCount = Number(localStorage.pageCount)+1;
Wenn die Seite zum ersten mal aufgerufen wurde, oder anders ausgedrückt, wenn die Variable pageCount noch nicht gesetzt wurde, werden die Anweisungen in den geschweiften Klammern hinter else ausgeführt. Die Variable pageCount bekommt den Wert 1 zugewiesen: localStorage.pageCount = 1;

Nach der if Struktur wird ein Satz in den Gültigkeitsbereich des <div id="result" > geschrieben.


zurück zur Hauptseite Web Storage Tipp