[FRAGE] Formular mit Local Storage speichern und abrufen

[Mimi173]

Hallo,
ich bin derzeit dabei JavaScript zu lernen und möchte hierzu eine Anwendung erstellen, in der Daten aus einem Formular gespeichert und abgerufen werden können.

Kurze Beschreibung der Idee:
In der Anwendung sollen 2 Seiten existieren. Eine Hauptseite, auf der Beiträge angezeigt werden sollen und ein Formular, in welches man die Beiträge eingibt, die dann angezeigt werden sollen.
Das Formular besteht aus mehreren Textfeldern, sowie einem DropDown-Menü. Die Daten aus allen Feldern sollen dann mit Hilfe des Local Storage gespeichert werden und auf der Hauptseite dann als ein Beitrag ausgegeben werden.
Sobald das Formular erneut gespeichert/abgeschickt wird, soll dieses in einem neuen Beitrag gespeichert und auf der Hauptseite aufgerufen werden.
Dies sollte auf der Hauptseite (nach laden des Local Storage) in etwa so aussehen:

1. Textfeld 1: XXX Textfeld 2: XXX Textfeld 3: XXX Textfeld 4: XXX
2. Textfeld 1: XXX Textfeld 2: XXX Textfeld 3: XXX Textfeld 4: XXX

Jede Zeile entspricht einem neuen Absenden des Formulars. Als Textfeld soll dann der entsprechende Name des Textfeldes angezeigt werden und bei XXX dann der Inhalt, der im Formular angegeben wurde.

Da ich eine private Code-Vorlage verwende möchte ich meinen bisherigen Code nicht öffentlich hier posten.. Daher hier eine kurze Beschreibung, wie es bei mir momentan ist:
Das Formular habe ich vollständig erstellt mit jeweiligen IDs für die Textfelder/das DropDown-Menü.
Ich habe auch einen Code für den Local Storage mit drin, sodass ich die Angaben schon abspeichern kann. Allerdings werden bei mir derzeit die Angaben aus den Textfeldern als einzelne Punkte gespeichert und nicht als kompletter Beitrag. Wenn ich das Formular erneut abspeicher werden die Angaben dahinter gemacht, ohne dass man sieht was nun zusammen gehört.
Bei mir sieht das etwa so aus:
0. Inhalt1 1. Inhalt2 2. Inhalt3 3. Inhalt4 ...

Vielleicht könnte mir ja jemand genau erklären, wie ich vorzugehen habe, um den Local Storage richtig zu nutzen und die Beiträge richtig anzuzeigen. Ich habe im Internet schon nach Tutorials o.Ä. gesucht, aber leider nichts gefunden was mir wirklich hilft.. Daher würde ich mich über eine genaue Anleitung freuen.

Danke schon mal für eure Mühe!

LG, Mimi


EDIT:
Ich habe etwas mit Arrays herumprobiert, aber wirklich weitergekommen bin ich bisher noch nicht.. wie gesagt ich bin erst dabei JS zu lernen und bin leider noch eine totale Anfängerin =/

Hier dann aber doch zumindest der relevante Teil meines JS-Codes (wie erwähnt den Großteil habe ich aus einer Vorlage):

<script>
var chunk = Array();

function loadpage ()
{
if (window.sessionStorage == null)
sout = "sessionStorage not supported by the browser";
else
sout = "sessionStorage supported by the browser";
ctr = document.getElementById ('session');
ctr.innerHTML = sout;

if (window.localStorage == null)
sout = "localStorage not supported by the browser";
else
sout = "localStorage supported by the browser";
ctr = document.getElementById ('local');
ctr.innerHTML = sout;
}

function copy(id)
{
fragment = document.getElementById (id);
chunk = Array("monat:", "kategorie:", "titel:", "betrag:", "datum:", "bemerkungen:");
chunk.push(monat.value);
chunk.push(kategorie.value);
chunk.push(titel.value);
chunk.push(betrag.value);
chunk.push(datum.value);
chunk.push(bemerkungen.value);
showNumber();
alert (node.value);
ctr = document.getElementById ('chunk');
str = "";
for (i = 0; i < chunk.length; i++)
str += "<b>" + i + "</b>: " + chunk+ " | ";
ctr.innerHTML = str;
}

function store()
{
value = JSON.stringify(chunk);
window.localStorage.setItem ("chunk", value);
}

function load()
{
value = window.localStorage.getItem("chunk");
chunk = JSON.parse(value);
if (chunk == null) chunk = Array();
showNumber();
show();
}

function show()
{
b = document.getElementById ('board');
s = "";
for (i = 0; i < chunk.length; i++)
s += "<b>" + i + "</b>: " + chunk + " ";
b.innerHTML = s;
}
</script>

 

[kkapsner]

Ich weiß, dass ich ohne den Code hier zu zeigen keine konkrete Hilfe zu meinem Code bekommen kann.

Ja.

Aber vielleicht könnte mir ja jemand genau erklären, wie ich vorzugehen habe, um den Local Storage richtig zu nutzen

Wenn dein Zeug schon gespeichert und abgerufen werden kann, benutzt du localStorage schon richtig. Du musst nur die Art und Weise, wie du die Daten speicherst ändern. Für verschiedene Datensätze ist eine key-value-DB (was der localStorage im Prinzip ist) einfach nicht ideal geeignet. Ich würde ja alle Datensätze in einem Array speichern, in dem dann die verschiedenen Datensätze durch Objects repräsentiert werden. Dieses Array würde ich dann in einen JSON-String umwandeln und dann diesen String im localStorage speichern.