To Do List

So funktioniert das Script

Das Script hat vier Aufgaben: Es legt Einträge im Browserspeicher ab, holt sie wieder heraus, baut daraus eine Tabelle und verbindet die Knöpfe mit den passenden Funktionen. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen im Inneren nicht mit anderen Scripts der Seite kollidieren.

const SCHLUESSEL_ANZAHL = "PT_NumToDoList";
const SCHLUESSEL_EINTRAG = "PT_ToDoItem";

Der Browserspeicher funktioniert wie ein Karteikasten: Jede Ablage hat einen Namen (den Schlüssel) und einen Text als Inhalt. Dieses Script benutzt einen Schlüssel für die höchste vergebene Nummer und je einen pro Eintrag — PT_ToDoItem1, PT_ToDoItem2 und so weiter. Die etwas kryptischen Namen stammen noch aus der Cookie-Fassung von 2008 und bleiben absichtlich unverändert, damit alte Einträge nicht verloren gehen.

function lesen(name) {
  try { return localStorage.getItem(name); }
  catch (fehler) { return null; }
}

Drei kleine Hilfsfunktionen kapseln den Zugriff: lesen, schreiben und entfernen. Der try/catch-Block darum herum ist kein Zierrat — in bestimmten Browsereinstellungen (privates Fenster, blockierte Websitedaten) wirft schon der bloße Zugriff auf localStorage einen Fehler. Ohne catch würde das ganze Script an dieser Stelle stehen bleiben; so liefert es einfach null und die Liste bleibt eben leer.

const nummer = hoechsteNummer() + 1;
schreiben(SCHLUESSEL_EINTRAG + nummer, text);
schreiben(SCHLUESSEL_ANZAHL, nummer);

So kommt ein neuer Eintrag hinein: Die bisher höchste Nummer wird um eins erhöht, der Text unter dieser Nummer abgelegt und die neue Höchstnummer notiert. Diese Nummer ist die Hausnummer eines Eintrags — sie ändert sich nie wieder, auch wenn davor etwas gelöscht wird. Deshalb gibt es zwei verschiedene Zahlen im Script: nummer ist der Speicherplatz, platz die laufende Nummer in der Anzeige.

for (let nummer = 1; nummer <= hoechsteNummer(); nummer++) {
  const text = lesen(SCHLUESSEL_EINTRAG + nummer);
  if (text !== null) {
    platz++;
    koerper.appendChild(zeile(text, platz, nummer));
  }
}

Beim Anzeigen läuft die Schleife alle je vergebenen Nummern durch. Gelöschte Plätze liefern null und werden übersprungen — die Liste hat also keine Lücken in der Nummerierung, obwohl im Speicher welche sind. appendChild hängt die fertige Tabellenzeile unten an den Tabellenkörper an.

const inhalt = document.createElement("td");
inhalt.textContent = text;

Die Zeilen werden Stück für Stück mit document.createElement gebaut statt als HTML-Text zusammengeklebt. Das ist etwas mehr Schreibarbeit, hat aber einen handfesten Vorteil: textContent setzt den Text als reinen Text ein. Tippt jemand <b>Milch</b> in das Feld, steht genau das in der Liste — es wird nicht als HTML ausgeführt. Bei innerHTML wäre das anders, und ein Besucher könnte sich fremdes Markup in die eigene Seite schreiben.

function knopf(beschriftung, aufgabe) {
  const element = document.createElement("button");
  element.type = "button";
  element.textContent = beschriftung;
  element.addEventListener("click", aufgabe);
  return element;
}

Jede Zeile braucht zwei Knöpfe, die genau ihren eigenen Eintrag betreffen. Die Funktion knopf baut einen solchen Knopf und hängt gleich die mitgegebene aufgabe an das Klickereignis. Beim Aufruf wird die Aufgabe als kleine Funktion übergeben — function () { loeschen(nummer); } —, die sich die Nummer ihrer Zeile merkt. Solche mitgegebenen Funktionen heißen Callbacks: Sie werden nicht sofort ausgeführt, sondern später, wenn das Ereignis eintritt.

const neu = prompt("Aktion " + platz + " bearbeiten:", alt);
if (neu !== null && neu.trim() !== "") {

prompt() öffnet das kleine Eingabefenster des Browsers; der zweite Wert ist der Text, der schon darin steht. Klickt der Besucher auf „Abbrechen“, gibt prompt den Wert null zurück — dann bleibt alles beim Alten. trim() schneidet Leerzeichen an den Rändern ab, damit niemand versehentlich einen leeren Eintrag speichert.

Zum Anpassen: Die Beschriftungen „Bearbeiten“, „Löschen“ und der Satz „Noch keine Aktion eingetragen.“ stehen direkt als Text im Script und dürfen frei geändert werden. Wollt ihr die Liste pro Unterseite getrennt führen, gebt den beiden Schlüsseln oben einfach unterschiedliche Namen, etwa "PT_ToDoItem_Urlaub".