ToDo-Liste mit JavaScript

Die im Formular eingetragenen Daten per JavaScript: localStorage() im Browser des Benutzers hinterlegen, auslesen und löschen. Wie das alles genau abläuft, ist im Quelltext nachzulesen.

Demo

Quelltext: todo-liste.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘ ◑


<!DOCTYPE html>

<html lang="de" dir="ltr">

 <head>

  <meta charset="UTF-8">

  <title>ToDo-Liste</title>

  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">


<style>

/*

 * ToDo-Liste

 */



body {

 background-color: #FBFDFF;

}



body, textarea, input {

 font-family: Verdana, Arial, Sans-Serif;

}



fieldset {

 display: Inline;

 border: Solid 1px #0091C8;

}



fieldset legend {

 color: #0091C8;

}



textarea {

 width: 300px;

 height: 150px;

 resize: none;

}



:focus-visible {

  outline: Solid 1px #2284E6;

}



div.element {

 padding: 5px;

 margin-bottom: 5px;

 border-bottom: Solid 1px #CECECE;

 cursor: Default;

 transition: background-color 0.5s;

}



div.element:hover {

 background-color: rgba(223, 247, 255, 0.5);

}



div#liste {

 width: 500px;

 height: 250px;

 overflow: Auto;

 background-color: #FFFFFF;

 background-image:

  linear-gradient(90deg, transparent 147px, #ABCED4 147px, #ABCED4 149px, transparent 149px);

 background-size: 100% 2.2em;

 resize: vertical;

}

</style>



<script>

/*

 * ToDo-Liste

 */



// JavaScript-Funktion nach dem laden des DOMs ausführen

window.addEventListener("DOMContentLoaded", function() {



 // Dem HTML-Button [id="speichern"] eine JavaScript-Funktion zuweisen

 document.getElementById("speichern").addEventListener("click", speichern);



 // Funktion auslesen() aufrufen

 auslesen();

});



// Lokale Storage-Objekte auslesen

function auslesen() {



 // Array setzen

 let liste = [];



 // Über allen lokalen Storage-Objekten iterieren

 for (var i = 0; i < localStorage.length; i++) {



  // Enthält der Schlüssel den Inhalt: "-todo-"

  if (localStorage.key(i).includes("-todo-")) {



   // Den Schlüssel mit split("-") in ein Array zerlegen

   var teil = localStorage.key(i).split("-");



   // Deutsches Datumsformat erstellen

   var datum = teil[2] + '.' + teil[1] + '.' + teil[0];



   // Einen Kommentar zusammen mit dem Datum hinzufügen (wird zur späteren Sortierung verwendet)

   var inhalt = '<!-- ' + teil[0] + '-' + teil[1] + '-' + teil[2] + ' -->' +



    // Ein Div-Element mit der ID des Schlüssels hinzufügen

    '<div class="element" id="' + localStorage.key(i) + '">' +



    // Einen Button zum löschen des Div-Elements hinzufügen

    '<button type="button" title="Löschen" onClick="entfernen(`' + localStorage.key(i) + '`)">x</button>' +



    // Deutsches Datumsformat und den Wert vom lokalen Storage-Objekt hinzufügen

    '&emsp;' + datum  + '&emsp;' + localStorage.getItem(localStorage.key(i)) + '</div>';



   // Den Inhalt in ein Array setzen

   liste.push(inhalt);

  }

 }



 // Array sortieren

 liste.sort();



 // Das Array in einen String umwandeln und ausgeben

 document.querySelector("#liste").innerHTML = liste.join("");

}



// Lokales Storage-Objekt speichern

function speichern() {



 // Überprüfen ob alle Pflichtfelder ausgefüllt sind, ggf. eine Meldung ausgeben

 if (document.getElementById("Form").reportValidity()) {



  // Zufallszahl erzeugen z.B.: 9045

  var rnd = Math.round(Math.random() * 10000);



  // Den Schlüssel erstellen, z.B.: 2023-03-16-todo-9045

  var key = document.getElementById("key").value + '-todo-' + rnd;



  // Den Wert (Inhalt) aus dem Textarea auslesen

  var wert = document.getElementById("wert").value;



  // Das Schlüssel/Wert-Paar im lokalen Storage-Objekt speichern

  window.localStorage.setItem(key, wert);



  // Formular zurücksetzen

  document.getElementById("Form").reset();



  // Funktion auslesen() aufrufen

  auslesen();

 }

}



// Lokales Storage-Objekt entfernen

function entfernen(id) {



 // Die ID in der Browser-Konsole (zur Kontrolle) ausgeben

 console.log(id);



 // Überprüfen ob die übergebene ID des Div-Elements im DOM existiert

 if (document.getElementById(id)) {



 // Das Idem aus dem lokalen Storage-Objekt entfernen

 window.localStorage.removeItem(id);



 // Das Div-Element aus dem DOM entfernen

 document.getElementById(id).remove();

 }

}

</script>



</head>

<body>



<form id="Form">

<fieldset>

 <legend>ToDo-Liste</legend>



<p><label>Text: <br>

 <textarea id="wert" required="required"></textarea></label>

</p>



<p><label>Datum: 

 <input type="date" id="key" required="required" value="<?=date("Y-m-d");?>"></label>&emsp;

 <button type="button" id="speichern">Speichern</button>

</p>



<div id="liste"></div>



</fieldset>

</form>



</body>

</html>

➤ Gefällt Ihnen das Skript oder haben Sie einen Fehler gefunden? Dann freue ich mich auf Ihren Kommentar.

Tipps

.htaccess - Passwortschutz für Webseiten: Mit einer .htaccess Datei und einer .htpasswd Passwort-Datei lassen sich bestimmte Verzeichnisse und die darin enthaltenen Dateien vor unerlaubtem Zugriff schützen.

Download-Archiv: Mit dem Download-Archiv können Sie Bilder, PDF-Dateien, ZIP-Archive und so weiter auf dem Server hochladen. Die Datei-Infos (Dateiname, Beschreibung, Dateigröße und das Datum) werden in einer SQLite-Datenbank gespeichert.

Artikel über Checkboxen auswählen: Hier können Artikel (Bilder) ausgewählt werden die bestimmte Kriterien der Checkboxen erfüllen. Die Daten werden in einer CSV-Datei gespeichert und können individuell angepasst werden.

Favicon erstellen - Ihr Logo in den Lesezeichen (Favoriten): Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte” Webseite mit einem eigenen Symbol.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.