Klickzähler
Ein Handzähler für den Browser: mehrere benannte Zähler, plus und minus, und die Stände bleiben nach dem Neuladen erhalten.
Der mechanische Handzähler mit dem Daumenhebel ist ein einfaches, aber unschlagbares Werkzeug: Besucher zählen, Vögel zählen, Stimmen auszählen, Wiederholungen mitzählen. Dieses Script bildet ihn nach — mit dem Vorteil, dass ihr mehrere Zähler gleichzeitig führen und jedem einen Namen geben könnt.
Ein Klick auf den großen Knopf zählt hoch, der kleine daneben korrigiert nach unten, falls ihr euch verzählt habt. Über das Eingabefeld benennt ihr den gerade sichtbaren Zähler, und mit „Neuer Zähler" legt ihr weitere an. Unter den Zählern steht immer die Summe aller — praktisch, wenn ihr etwa Ja-, Nein- und Enthaltungsstimmen getrennt zählt und trotzdem die Gesamtzahl im Blick behalten wollt.
Die Stände bleiben erhalten, wenn ihr die Seite neu ladet oder den Browser schließt: Sie liegen im lokalen Speicher eures Geräts. Wichtig ist dabei, was das nicht heißt — die Zahlen werden weder an uns noch an sonst jemanden übertragen, sie stehen nur in diesem einen Browser auf diesem einen Gerät. Wer die Seite auf dem Telefon öffnet, findet dort seine eigenen Zähler.
Verwandtes im Archiv: die To-Do-Liste benutzt denselben lokalen Speicher, Onlinezeit misst die Verweildauer, und für Zählungen im Text gibt es Wörter zählen.
Die Stände liegen nur in eurem Browser und werden nirgends übertragen.
So funktioniert das Script
Zwei Dinge sind hier lehrreich: wie man Bedienelemente aus Daten erzeugt, statt sie ins HTML zu schreiben, und wie man Werte über das Schließen des Browsers hinweg behält.
let zaehler = laden();
…
zaehler.forEach(function (eintrag, nummer) { … });Der ganze Zustand steckt in einem einzigen Array aus Objekten mit Name und Stand. Die Anzeige wird daraus erzeugt und nicht umgekehrt — im HTML steht nur ein leerer Behälter. Dieses Vorgehen heißt „die Ansicht folgt den Daten" und ist die Grundidee aller modernen Oberflächen-Bibliotheken. Sein Vorteil zeigt sich beim Entfernen eines Zählers: Es genügt, den Eintrag aus dem Array zu nehmen und neu zu zeichnen; um das Aufräumen im HTML muss sich niemand kümmern.
plus.addEventListener("click", function () {
zaehler[nummer].stand++;
stand.textContent = zaehler[nummer].stand;
…
});Die Funktion im Ereignis-Empfänger merkt sich nummer aus der umgebenden Schleife — sie bildet einen sogenannten Abschluss (englisch closure) über diese Variable. Das funktioniert hier nur deshalb zuverlässig, weil forEach für jeden Durchlauf einen eigenen Satz Variablen anlegt. Mit einer klassischen for-Schleife und var hätten am Ende alle Knöpfe denselben Wert — einer der berühmtesten Anfängerfehler in JavaScript, den erst let aus der Welt geschafft hat.
window.localStorage.setItem(schluessel, JSON.stringify(zaehler));Der lokale Speicher des Browsers hält Zeichenketten, keine Objekte. JSON.stringify macht aus dem Array eine Zeichenkette, JSON.parse beim Laden wieder ein Array. Die Daten bleiben dabei ausschließlich auf dem Gerät des Besuchers — anders als bei einem Cookie werden sie nie an einen Server geschickt.
try {
const roh = window.localStorage.getItem(schluessel);
…
} catch (fehler) {
// absichtlich still
}Der Zugriff auf den lokalen Speicher kann fehlschlagen — in privaten Fenstern mancher Browser, bei strengen Datenschutzeinstellungen oder wenn der Speicher voll ist. Ohne try … catch bräche das Script an dieser Stelle ab und die Seite bliebe leer. So läuft der Zähler auch ohne Speichermöglichkeit, er vergisst dann eben beim Neuladen. Ein bewusst leerer catch-Block gehört kommentiert, sonst hält ihn der nächste Leser für vergessen.
const summe = zaehler.reduce(function (bisher, eintrag) {
return bisher + eintrag.stand;
}, 0);reduce fasst ein Array zu einem einzelnen Wert zusammen. Es bekommt eine Funktion, die den bisherigen Zwischenstand und das nächste Element erhält, und einen Startwert — hier die Null. Dasselbe ließe sich mit einer Schleife und einer Zählvariablen schreiben; reduce macht dagegen auf einen Blick deutlich, dass ein Gesamtwert gebildet wird.
Zum Anpassen: Für Tastenbedienung — beim Zählen praktischer als Mausklicks — hängt ihr einen Empfänger für keydown an das Dokument und erhöht bei der Leertaste. Sollen die Zähler auch die Uhrzeit des letzten Klicks festhalten, ergänzt ihr im Objekt ein weiteres Feld; gespeichert wird es automatisch mit.
Script für die eigene Homepage
Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.