Html liste speicher und adden?

Hallo, ich habe mir vorgenommen eine Einkaufsapp zu machen mit html. Ich frage micht nur wie ich eine Liste erstellen kann. Also ich möchte in einer html datei eine Liste haben und wiedergeben können, dazu soll man zur Liste auch sachen hinzufügen können. Dann soll die Liste aufgelistet werden.

Answer 1

[regex9]

Für eine Auflistung eignet sich das ul-Element.

<ul id="list">
  <li>Some entry</li>
</ul>
<input id="input">
<button id="add-button">Add</button>

Einträge kannst du via JavaScript hinzufügen.

const ul = document.getElementById("list");
const input = document.getElementById("input");

document.getElementById("add-button").addEventListener("click", () => {
  const li = document.createElement("li");
  li.textContent = input.value;
  ul.appendChild(li);
});

Beachte, dass die Änderungen an der Liste in diesem Fall nicht persistent wären und nur dem Seitenbesucher selbst sichtbar sind (nicht aber anderen).

Ersteres könnte man via Cookie oder Web Storage lösen (die Listendaten werden also vom Browser gespeichert).

Wenn du hingegen die Anforderung hast, dass jeder Seitenbesucher dieselbe Liste sehen kann, müsstest du die Daten auf einem zentralen Server speichern (sei es in einer Textdatei oder einer Datenbank). Bei Seitenaufruf muss diese Datenquelle ausgelesen und der entsprechende HTML-Code generiert werden. Das Lesen und Speichern erfolgt also über eine serverseitige Anwendung. Je nachdem, über welchen Webserver deine Webseite ausgespielt wird, könntest du hier auf PHP, JavaScript, C#, o.ä. Programmiersprachen zurückgreifen.

Comments

[Junski1]

Bleiben die einträge dann temporär oder werden sie geschpeichert

[regex9]

@Junski1

Bei meinem Code-Beispiel bleiben sie nur temporär. Sobald du die Seite neulädst, sind sie wieder weg.

[Junski1]

@regex9 Und um sie zu speichern brauche ich PHP?

[regex9]

@Junski1

Siehe oben.

(...) Das Lesen und Speichern erfolgt also über eine serverseitige Anwendung. Je nachdem, (...), könntest du hier auf PHP, (...) o.ä. Programmiersprachen zurückgreifen.

Answer 2

[PhotonX]

Das geht mit HTML nicht, HTML kann nur fest vorgegebene Inhalte darstellen. Soll der Nutzer die Inhalte verändern können, dann benötigst du JavaScript, falls sie serverseitig gespeichert und dann vom Nutzer geladen werden sollen, dann auch PHP.

Answer 3

[NovaOn144hz]

Hallo,

geht so nicht. Nutz ein Framework wie VueJS. Dann kannst du es auch machen. Die Einkaufsliste wär ein einfaches JSON Object.

In VueJS HTML kannst du auch for Schleifen machen.

Comments

[mompf03231]

Wär vielleicht schlau erstmal Vanilla JS zu lernen bevor man mit einem Framework arbeitet.

Beides geht natürlich auch in Vanilla JS, dafür ist kein Framework nötig.

[NovaOn144hz]

@mompf03231

VanillaJS wird nicht in der Indrustrie verwendet. Würde direkt das richtige erlernen. Aber mach was du willst.

[mompf03231]

@NovaOn144hz

Um 'das Richtige' zu lernen sind Vanilla JS Kenntnisse aber angebracht

Genau wie es wenig Sinn macht direkt tailwind zu lernen ohne etwas über css zu wissen.

[NovaOn144hz]

@mompf03231

Tatsächlich ja, aber NodeJS vereinfacht viele Dinge, die dann unnötig erlernt sind in VanillaJS

[regex9]

@NovaOn144hz

Das ist projektabhängig, ob man es bei VanillaJS belässt oder auf zusätzliche Bibliotheken/... zurückgreift.

[NovaOn144hz]

@regex9

Im welchen Bezug meinst du das?

[regex9]

@NovaOn144hz

Auf deinen ersten Satz in deinem ersten Kommentar.

[NovaOn144hz]

@regex9

Natürlich kommt es auf das Projekt an, man kann natürlich alles Vanilla machen. Aber Frameworks bieten dir sehr viele Features (Egal ob kleines Projekt).

[regex9]

@NovaOn144hz

Das Frameworks diverse Features bieten (das sollte jedenfalls die Erwartungshaltung sein, andernfalls wären sie wohl nutzlos) habe ich nicht in Abrede gestellt. 😉