Projekt
Pausenplaner
Eine Liste, die man abhaken kann — und die morgen noch da ist.
Die berühmte To-do-Liste. Klingt langweilig, ist aber das Projekt, an dem man am meisten über die Verbindung zwischen Daten und Anzeige lernt.
Der Punkt, um den es geht
Es gibt zwei Dinge: die Liste im Speicher (ein Array) und die Liste auf dem Bildschirm (HTML-Elemente). Die Versuchung ist groß, direkt am Bildschirm herumzuschrauben — Element anhängen, Element löschen. Das funktioniert erstaunlich lange und wird dann plötzlich sehr unübersichtlich.
Der bessere Weg: Du änderst nur das Array. Danach zeichnest du die Liste komplett neu. Klingt nach mehr Arbeit, ist aber weniger — und es ist genau das Prinzip, auf dem React und alle anderen modernen Werkzeuge aufbauen.
Wenn du das hier verstanden hast, hast du etwas verstanden, das viele Leute mit zwei Jahren Erfahrung noch nicht verstanden haben. Kein Witz.
Das Speichern
localStorage merkt sich Text im Browser, auch nach dem Schließen. Es kann nur
Text — ein Array musst du also mit JSON.stringify in Text umwandeln und beim
Laden mit JSON.parse zurück. Das ist zwei Zeilen Code und der erste Moment,
in dem deine Seite sich etwas merkt.