HTML / JS: Wie kann ich mehrere Sachen aus dem localStorage ausgeben?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, JavaScript
24.07.2021, 01:40

1) Der script-Tag gehört entweder in den head oder (für deinen Fall) in den body. Außerhalb des html-Tags hat kein anderes Tag etwas zu suchen.

2) JavaScript ist bei der Parameterhandhabung von Funktionen flexibel. Du kannst ihnen mehr Argumente übergeben, als die Definition vorgibt.

Beispiel:

function printSum(numberOne, numberTwo) {
  const result = numberOne + numberTwo;
  console.log(result);
}

printSum(1, 2, 3, 4, 5);

Das Ergebnis ist dennoch 3, denn nur die ersten beiden Argumente werden verarbeitet.

Genauso verhält es sich bei setItem. Die Funktion erwartet nur zwei Argumente und verarbeitet somit also nur zwei Argumente. Das erste Argument ist der Schlüssel, der zweite Argument ist der Wert.

Um alle Werte deiner Eingabefelder in den Werteparameter zubekommen, müsstest du sie zusammenfassen / gruppieren. Ein Objekt wäre hierfür die beste Wahl, welches dann einen String im JSON-Format konvertiert wird (localStorage ist dafür ausgelegt, nur einfache Werttypen zu speichern)

const produkt = {
  "artikel": artikel,
  "beschreibung": beschreibung,
  "lagerplatz": lagerplatz,
  "bestand": bestand,
  "preis": preis
};
localStorage.setItem(schluessel, JSON.stringify(produkt));

In dem Zuge wäre es gut, die Bezeichner auch der üblichen Konvention anzupassen. Das heißt, Variablennamen beginnen mit einem Kleinbuchstaben. Sonderzeichen wie Umlaute in Bezeichnernamen würde ich generell vermeiden.

Des Weiteren würde ich empfehlen, die modernen Sprachfunktionalitäten zu nutzen und statt var, let oder const einzusetzen. Der Unterschied zu var wird in beiden verlinkten Artikeln erklärt.

Da du bei Abruf nun ein Objekt zurückbekommst, müsste auch deine Suchfunktion noch etwas angepasst werden.

const data = localStorage.getItem(schluessel);

if (data !== null) {
  const produkt = JSON.parse(data);
  document.getElementById('Artikel').value = produkt.artikel;
}

Sofern der Eintrag überhaupt existiert, wird der gespeicherte Wert zu einem Objekt geparst. Danach kann auf dessen Eigenschaften zugegriffen werden.

Zuletzt noch ein paar Ratschläge:

1) Es ist immer gut, Eingabefelder mit einem Label auszustatten. Da deine Tabellenstruktur eh etwas verquer ist, könnte diese im selben Zug korrigiert werden.

Im Tabellenkopf werden th-Elemente mit den besagten Labels eingesetzt.

<thead>
  <tr>
    <th><label for="Artikel">Artikel Nr.</label></th>
    <!-- usw. ... -->
  </tr>
</thead>

Bedenke, dass die Titel ebenso Überschriftenelemente darstellen. Vor allem, wenn du folgend Ergebnisse nicht in den Eingabefeldern, sondern weiteren Tabellenzeilen ausgeben würdest.

Das Label wiederum zeigt mit seinem for-Attribut auf das jeweilige id-Attribut des Eingabefeldes, welches es bezeichnet. Es wird eine logische Verknüpfung erstellt.

2) Würdest du die gesamte Tabelle in einem form-Element gruppieren, könntest du leicht Funktionalitäten wie das Zurücksetzen aller Eingaben einfügen.

<form>
  <!-- table ... -->
  <input type="reset">
</form>
RadSrb 
Fragesteller
 24.07.2021, 14:04

irgendwie funktioniert es nicht

0
regex9  24.07.2021, 21:22
@RadSrb

Mit dieser Art Fehlerbeschreibung wirst du nie weit kommen. Weder auf alleiniger Spurensuche, noch wenn dir jemand anders helfen soll.

  1. Beschreibe das aktuelle Verhalten und vergleiche es mit dem erwarteten Verhalten.
  2. Nutze des Weiteren die Entwicklertools deines Browsers. Die Browserkonsole kann Auskunft über Fehler geben und unter Applications (Chrome, Opera) bzw. Web-Speicher (Firefox) kannst du prüfen, welche Daten im Storage stehen.
0
Firstmine
23.07.2021, 23:53

Hey,

um deinen Code lesbarer zu machen füge ihn das nächste mal auf Seiten wie hastebin oder pastebin ein. Ich habe das mal eben für dich gemacht:

https://hastebin.com/sesuhuzozi.xml

Wenn dir das nicht lieb ist benutze bitte Codeblöcke:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Alle Artikel</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>Artikel Nr.</td>
        <td>Beschreibung</td>
        <td>Lagerplatz</td>
        <td>Bestand</td>
        <td>Preis</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="Artikel" value="" type="text" />
        </th>
        <th>
          <input id="Beschreibung" value="" type="text" />
        </th>
        <th>
          <input id="Lagerplatz" value="" type="text" />
        </th>
        <th>
          <input id="Bestand" value="" type="text" />
        </th>
        <th>
          <input id="Preis" value="" type="text" />
        </th>
      </tr>
    </tbody>
  </table>
  Artikel Nr.: <input id="Schlüssel" value="" type="text" />
  <input type="button" value="speichern" onclick="speichern()" />
  <input type="button" value="Artikel suchen" onclick="suche()" />
</body>
</html>
<script>
  function speichern() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    var Artikel = document.getElementById('Artikel').value;
    var Beschreibung = document.getElementById('Beschreibung').value;
    var Lagerplatz = document.getElementById('Lagerplatz').value;
    var Bestand = document.getElementById('Bestand').value;
    var Preis = document.getElementById('Preis').value;
    window.localStorage.setItem(Schlüssel, Artikel, Beschreibung, Lagerplatz, Bestand, Preis);
  }
  function suche() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    document.getElementById('Artikel').value = window.localStorage.getItem(Schlüssel);
  }
</script>

Gruß
-Till

RadSrb 
Fragesteller
 23.07.2021, 23:55

danke dir hab ich vergessen wie das funktioniert werde ich ihn zukunft machen

1
BeamerBen  23.07.2021, 23:57

Du kannst die Frage auch bearbeiten und einer der GuteFrage Wichte wird dann die Bearbeitung akzeptieren.

Gibt glaube ich sogar Punkte, einfach ein auto Formatierer drüber laufen lassen und rein pasten. Die Fragesteller werden das eh nie selber lernen.

1
Firstmine  23.07.2021, 23:58
@BeamerBen

Ich denke schon dass er das in Zukunft schafft, ich glaube an das gute im Menschen! Wenn ich dass gemacht hätte wüsste er auch für andere Plattformen nicht dass es diese Möglichkeit gibt. Danke dir!

1
BeamerBen  24.07.2021, 00:02
@Firstmine

Er schon aber es kommen immer welche nach dies falsch machen :D

trotzdem natürlich eine gute Tat den Code vernünftig formatiert zu posten!

1
Firstmine  24.07.2021, 00:04
@BeamerBen
 es kommen immer welche nach dies falsch machen

Was heißt falsch, es ist halt nervig aber denen kann man es ja auch erklären und ihnen weitere Peinlichkeiten ersparen.. ich habe meinen ersten Code auch so gepostet, da war es noch auf discord was glaubst du wie ich dort Tod gehatet wurde. xd

Gruß

0
BeamerBen  24.07.2021, 00:05
@Firstmine

Zum Glück nicht als Screenshots, so welche gibts auch… 

0