marlem: LocalStorage - Speichern und Laden von Texten

Hallo,

ich habe leider mein Problem noch immer nicht gelöst. Folgender HTML Code:

<label for="Textzusprechen" accesskey="t">Text eingeben zum Sprechen</label><br>
	<textarea name="Textzusprechen" id="Textzusprechen" cols="50" rows="3"  style="width:90%;font-size:120%;"></textarea>
	<br><br>
	<label style="font-size:120%;" for="Auswahlsprechtexte">Text ausw&auml;hlen</label> 
	<select name="Auswahlsprechtexte" id="Auswahlsprechtexte" accesskey="w" style="width:76%;font-size:120%;"></select>
    <br>   
   <input type="button" value="Laden" accesskey="l" onclick="LocalStorageTextLaden()" title="Der ausgewählte Text wird geladen und gesprochen" style="padding:10px;width:90%;font-size:120%;"> 	 
   <input type="button" value="Speichern Unter" accesskey="u" onclick="LocalStorageTextSpeichernUnter(Textzusprechen.value)" title="Der eingegebene Text wird unter einem vorgegebenen Namen gespeichert" style="padding:10px;width:90%;font-size:120%;">

Jetzt der Javascipt-Code:

function LocalStorageTextLaden() {
	// Ausgewählter Text in aufklappbare Liste speichern
	var ausgewaehlerTextName = document.getElementById("Auswahlsprechtexte").value;
	
	//befüllen der TextArea
    zuLadenderText = localStorage.getItem(ausgewaehlerTextName);
	Textzusprechen.value = zuLadenderText;
	Sprechen();
}

function LocalStorageTextSpeichernUnter(textEingabe) {
	
	// Abfrage wie der gespeicherte Text heißen soll
	var vTextname = prompt("Wie soll der gespeicherte Text heißen?", "");
	
	localStorage.setItem(vTextname, textEingabe);
	
	// Neuen Text in aufklappbare Liste hinzufügen
    var createElm = document.getElementById("Auswahlsprechtexte");
	//Um eine Option zu speichern benötigst Du keinen fortlaufenden Index, 
	//es reicht wenn Du Dir die Länge der Auswahl holst!
    createElm.options[createElm.length] = new Option(vTextname, textEingabe);
}

Mein Ziel: Ich möchte mehrere verschiedene Texte in den Localstorage speichern und nach Auswahl in der Select-Aufklappbaren Liste wieder laden.

Mein Problem: Es funktioniert nur begrenzt. Ich bitte um Hilfe.

  1. Tach!

    Es funktioniert nur begrenzt. Ich bitte um Hilfe.

    Formulier das bitte genauer. Wo konkret im Code soll was passieren und was passiert stattdessen?

    dedlfix.

    1. Mit der Funktion function LocalStorageTextSpeichernUnter(textEingabe) sollen immer neue Texte im LocalStorage gespeichert werden. Das funktioniert 3 oder 4 Mal und dann sind alle Texte wieder gelöscht!

      1. Tach!

        Mit der Funktion function LocalStorageTextSpeichernUnter(textEingabe) sollen immer neue Texte im LocalStorage gespeichert werden. Das funktioniert 3 oder 4 Mal und dann sind alle Texte wieder gelöscht!

        Wenn du programmierst und dabei ein Problem hast, möchte ich gern eine Beschreibung aus Sicht des Programmierers und nicht aus Anwendersicht. Das bedeutet, dass du Debugging einsetzt und damit zumindest dem Problem auf die Spur zu kommen versuchst. Die Browser haben sehr gute Entwicklertools, damit kann man sich nicht nur zur Laufzeit anschauen, was der Code macht, sondern auch den LocalStorage und dessen Inhalt untersuchen. Ist beispielweise irgendwas auffälliges am LocalStorage zu beobachten?

        dedlfix.

        1. Ich bin jetzt WÜTEND!!!

          Ich habe bei meinem ersten Posting geschrieben, dass ich in Javascript ungeübt bin und das DEBUGGING wird nirgendwo richtig erklärt!

          Das Problem ist aber ein anderes. Wenn mich jemand fragt, wie man mit den Programmiersprachen Delphi, Java oder C# eine Textdatei nach einem bestimmten String durchsucht, dann bin ich in der Lage einen Code zu schreiben der das macht um zu zeigen wie es funktioniert. Anscheinend kann das hier niemand, deswegen höre ich jetzt auf hier Fragen zu stellen. Matthias Scharwies, mit dem ich immer wieder mal Mailkontakt habe, hat mir das Forum empfohlen, aber ich höre jetzt auf, macht einfach keinen Sinn!

          Bye!

          1. Hallo,

            Ich bin jetzt WÜTEND!!!

            wütend sein ist nichts was einen selbst oder andere irgendwie weiterbringt.

            Ich habe bei meinem ersten Posting geschrieben, dass ich in Javascript ungeübt bin und das DEBUGGING wird nirgendwo richtig erklärt!

            das stimmt nicht. Ich hab mit einem Klick das Wiki aufgerufen, dort in das Suchfeld „debugging“ eingetragen und sofort finde ich dort die entsprechende Info.

            Gruß
            Kalk

          2. Tach!

            Ich bin jetzt WÜTEND!!!

            Das hilft weder dir noch mir.

            Ich habe bei meinem ersten Posting geschrieben, dass ich in Javascript ungeübt bin und das DEBUGGING wird nirgendwo richtig erklärt!

            Achwas. Das halte ich für ein Gerücht. Und wenn es so wäre, dann wäre es hilfreich, dass wir ganz sachlich an der Stelle weitermachen. Selbst wenn es nach Jahren der Existenz dieser Werkzeuge immer noch keine Anleitungen gäbe, könnte man ja auch mal selbständig einen Blick reinwerfen, um sie kennenzulernen.

            Wenn mich jemand fragt, wie man mit den Programmiersprachen Delphi, Java oder C# eine Textdatei nach einem bestimmten String durchsucht, dann bin ich in der Lage einen Code zu schreiben der das macht um zu zeigen wie es funktioniert.

            Ja, das Problem ist anders. Das Problem ist nämlich, dass man beim Programmieren immer Probleme zu lösen hat, und dazu üblicherweise Debugging zum Einsatz kommt. Auch in Delphi, Java und C#. Die Werkzeuge sind unterschiedlich, aber dieses Prinzip ist genau dasselbe bei Javascript.

            macht einfach keinen Sinn!

            Genau. Ich bin kein Hellseher und weiß nicht auf magische Weise, was da bei dir passiert. Das weiß ich auch in meinen Systemen nicht auf diese Weise. Da muss ich schon genau hinschauen, um zu sehen, was passiert, und um zu erkennen, was dabei das Problem ist. In dem gezeigten Code ist nichts drin, das wie eine Ursache für das Verschwinden aussieht. Und er ist ziemlich übersichtlich, so dass du das Debugging daran üben kannst.

            dedlfix.

  2. var vTextname = prompt("Wie soll der gespeicherte Text heißen?", "");

    Das ist schonmal ein völlig falscher Ansatz. LocalStorage (LS) speichert Key/Value zu einer vorliegenden Seite (URL) und wenn der Text überhaupt wiedergefunden werden soll, muss Deine Anwendung den Key vorgeben. Idee: Speichere alles unter einem Key!

    D.h., beim Laden der Anwendung werden die Daten aus LS geholt, in der Anwendung bearbeitet (hinzufügen, löschen..) und beim Beenden der Anwendung gehts zurück nach LS.

    Die Daten selbst liegen in einer noch zu bestimmenden Datenstruktur damit sie adressierbar sind und zwischen LS und der Datenstruktur vermitteln JSON.stringify() und JSON.parse().

    Und nicht nur das, den JSON String kannst Du Dir jederzeit in der Console ausgeben, das ist Dein Debugging: So hast Du alle Daten Deiner Anwendung im Blick. MFG

    1. Du machst die Dinge immer so transparent. Das ist schön.

    2. Tach!

      LocalStorage (LS) speichert Key/Value zu einer vorliegenden Seite (URL) und wenn der Text überhaupt wiedergefunden werden soll, muss Deine Anwendung den Key vorgeben.

      Man kann die Keys problemlos finden, auch wenn man sie nicht kennt.

      for (key in localStorage) {
          if (localStorage.hasOwnProperty(key)) {
              console.log(key, localStorage[key]);
          }
      }
      

      dedlfix.