JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="nafets, post: 13907, member: 4775"] müsste vielleicht so funktionieren: [B]LocalStorage:[/B] Du kannst den LocalStorage verwenden, um die Liste im Browser des Benutzers zu speichern. Dazu musst du die Liste als JSON-String serialisieren und im LocalStorage speichern. Beim Laden der Seite kannst du dann den LocalStorage überprüfen und die gespeicherte Liste wiederherstellen. Hier ist ein Beispiel: [CODE=javascript]<script> var enterButton = document.getElementById("add"); // Referenz zum Button mit der ID "add" abrufen var input = document.getElementById("textfield"); // Referenz zum Textfeld mit der ID "textfield" abrufen var ul = document.querySelector("ul"); // Referenz zur ersten UL-Liste auf der Seite abrufen var item = document.getElementsByTagName("li"); // Referenz zu allen LI-Elementen auf der Seite abrufen // Funktion zum Erstellen eines Eintrags function erstellenEintrag() { if (input.value !== '') { // Überprüfen, ob das Eingabefeld nicht leer ist var li = document.createElement("li"); // Neues LI-Element erstellen li.appendChild(document.createTextNode(input.value)); // Dem LI-Element den eingegebenen Text hinzufügen ul.appendChild(li); // Das LI-Element zur UL-Liste hinzufügen input.value = ""; // Das Eingabefeld leeren li.addEventListener("click", abgehaktEintrag); // Event-Listener hinzufügen, um den Eintrag als erledigt zu markieren var deleteButton = document.createElement("button"); // Neuen Lösch-Button erstellen deleteButton.appendChild(document.createTextNode("Löschen")); // Dem Lösch-Button den Text "Löschen" hinzufügen li.appendChild(deleteButton); // Den Lösch-Button dem LI-Element hinzufügen deleteButton.addEventListener("click", loescheEintrag); // Event-Listener hinzufügen, um den Eintrag zu löschen speichereListe(); // Liste speichern, nachdem ein Eintrag hinzugefügt wurde } } // Funktion zum Markieren eines Eintrags als erledigt function abgehaktEintrag() { this.classList.toggle("done"); // Die CSS-Klasse "done" für das LI-Element umschalten, um den Eintrag als erledigt zu markieren speichereListe(); // Liste speichern, nachdem ein Eintrag markiert wurde } // Funktion zum Löschen eines Eintrags function loescheEintrag() { this.parentNode.remove(); // Das übergeordnete Element (LI-Element) entfernen, um den Eintrag zu löschen speichereListe(); // Liste speichern, nachdem ein Eintrag gelöscht wurde } // Funktion zum Speichern der Liste im LocalStorage function speichereListe() { var listItems = []; // Array zum Speichern der Einträge erstellen for (var i = 0; i < item.length; i++) { listItems.push(item[i].textContent); // Textinhalt jedes LI-Elements zum Array hinzufügen } var json = JSON.stringify(listItems); // Array in einen JSON-String umwandeln localStorage.setItem("liste", json); // JSON-String im LocalStorage unter dem Schlüssel "liste" speichern } // Funktion zum Wiederherstellen der Liste aus dem LocalStorage function wiederherstelleListe() { var json = localStorage.getItem("liste"); // JSON-String aus dem LocalStorage abrufen if (json) { // Überprüfen, ob ein JSON-String vorhanden ist var listItems = JSON.parse(json); // JSON-String in ein Array umwandeln for (var i = 0; i < listItems.length; i++) { var li = document.createElement("li"); // Neues LI-Element erstellen li.appendChild(document.createTextNode(listItems[i])); // Dem LI-Element den Text aus dem Array hinzufügen ul.appendChild(li); // Das LI-Element zur UL-Liste hinzufügen li.addEventListener("click", abgehaktEintrag); // Event-Listener hinzufügen, um den Eintrag als erledigt zu markieren var deleteButton = document.createElement("button"); // Neuen Lösch-Button erstellen deleteButton.appendChild(document.createTextNode("Löschen")); // Dem Lösch-Button den Text "Löschen" hinzufügen li.appendChild(deleteButton); // Den Lösch-Button dem LI-Element hinzufügen deleteButton.addEventListener("click", loescheEintrag); // Event-Listener hinzufügen, um den Eintrag zu löschen } } } // Event-Listener hinzufügen, um einen Eintrag zu erstellen enterButton.addEventListener("click", erstellenEintrag); // Liste beim Laden der Seite aus dem LocalStorage wiederherstellen wiederherstelleListe(); </script> [/CODE] [LIST] [*]Die Funktion[B] speichereListe() [/B]erstellt ein Array [B]listItems[/B], in dem alle Textinhalte der Listenelemente gespeichert werden. [*]Das Array [B]listItems [/B]wird dann in einen JSON-String umgewandelt und im LocalStorage unter dem Schlüssel "liste" gespeichert. [*]Beim Laden der Seite wird die Funktion [B]wiederherstelleListe()[/B] aufgerufen, um die Liste aus dem LocalStorage wiederherzustellen. [*]Die Funktion [B]wiederherstelleListe()[/B] ruft zuerst localStorage.getItem("liste") auf, um den gespeicherten JSON-String abzurufen. [*]Falls ein JSON-String vorhanden ist, wird er in ein Array [B]listItems [/B]umgewandelt. [*]Für jedes Element im Array [B]listItems [/B]wird ein neues Listene [/LIST] weitere möglichkeiten zum speichern sind: [B]Serverseitige Speicherung:[/B] Wenn du eine serverseitige Umgebung verwendest, kannst du die Liste an den Server senden und dort speichern, z. B. in einer Datenbank. Du kannst eine AJAX-Anfrage verwenden, um die Liste an den Server zu senden und sie dort zu speichern. [B]Datenbank oder Dateisystem:[/B] Du kannst eine externe Datenbank oder ein Dateisystem verwenden, um die Liste zu speichern. Dazu benötigst du eine serverseitige Technologie wie Node.js oder PHP, um die Liste zu verarbeiten und in der Datenbank oder Datei zu speichern. viel spaß Stefan PS "Angerfangen vor 30 Jahren aber immer nur für den privaten Gebrauch mit BASIC > QB > VBasic > html > css > PHP > sql > PowerShell und seit 3monaten javascript hauptsächlich aber PHP und PS und VB(in Excel) aber überall nur rudimentäre Ahnung !" [/QUOTE]

Authentifizierung