localStorage - Suche ausführliche Dokumentation mit Codebeispielen

[marlem]

Guten Tag,

ich entwickle eine App in der die Verwendung des LocalStorage eine wesentliche Rolle spielt.

Deswegen suche ich eine Ausführliche Dokumentation (muss keine Internetseite sein, kann auch ein Buch sein) zum localStorage.

Ich freue mich über Antworten.

[dedlfix]

Tach!

ich entwickle eine App in der die Verwendung des LocalStorage eine wesentliche Rolle spielt.

Deswegen suche ich eine Ausführliche Dokumentation (muss keine Internetseite sein, kann auch ein Buch sein) zum localStorage.

Da gibt es keine Notwendigkeit einer großartigen Dokumentation. Die Storage API ist sehr übersichtlich. Passt auch in unserem Wiki auf eine Seite.

Aber wenn du weitere/konkrete Fragen hast, dann stell sie bitte.

dedlfix.

[marlem]

Hallo dedlfix,

Ich habe ein textarea in einer HTML-Seite. Der Anwender schreibt Text in dieses Textarea. Jetzt soll der Anwender die Möglichkeit haben, diesen Text unter einem bestimmten Namen im LocalStorage zu speichern und bei Bedarf wieder aus dem LocalStorage ins Texteara zu laden. Außerdem soll gespeicherter Text im LocalStorage geändert werden können.

Hierfür hätte ich gerne Codebeispiele.

[dedlfix]

Tach!

Hierfür hätte ich gerne Codebeispiele.

Das Arbeiten mit dem localStorage ist wirklich so einfach, wie auf der bereits verlinkten Wiki-Seite gezeigt. Und zwar deswegen, weil das nur ein ganz einfaches Speichersystem ist, ein sogenannter Key-Value-Speicher.

dedlfix.

[marlem]

Ich habe es getestet. Bei mir, ich code in notepad++, gibt es zum beispiel setItem nicht!

[marlem]

Schreibe doch mal bitte diese Methode:

function textSpeichernUnter(textEingabe) {
	
	// Abfrage wie der gespeicherte Text heißen soll
	var textname = prompt("Wie soll der gespeicherte Text heißen?", "");
	
	//in Objekt speichern
	miniMap[textname] = 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(textname, textEingabe);
}

Mit localStorage.

[dedlfix]

Tach!

Schreibe doch mal bitte diese Methode: [...] Mit localStorage.

	//in Objekt speichern
	miniMap[textname] = textEingabe;

Diese eine Zeile wäre zu Ändern in:

localStorage.setItem(textname, textEingabe);

Und wenn N++ da was nicht kann, ist das kein Maßstab. Das ist nur ein Editor mit ein wenig Unterstützung für eine Menge Sprachen. Um alles zu unterstützen, braucht es schon eine größere IDE mit mehr Power. Jedenfalls kann man auch nicht unterstützte Dinge in N++ eingeben. Um die Dinge live zu testen, inklusive echter Autovervollständigung, kann man die Konsole in den Entwicklertools der Browser verwenden.

dedlfix.

[marlem]

okay, danke für den Code und den Hinweis zu notpad++.

Eigentlich habe ich gedacht, dass ich die zweite Methode selber umbauen kann, aber ich blicke es nicht.

Wie muss ich diese Methode umbauen:

function textSpeichernUnter(textEingabe) {
	
	// Abfrage wie der gespeicherte Text heißen soll
	var textname = prompt("Wie soll der gespeicherte Text heißen?", "");
	
	//in Objekt speichern
	miniMap[textname] = 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(textname, textEingabe);
}

Danke für Deine Hilfe.

Edit Rolf B: Mehrzeiligen Code klammert man nicht mit Backticks, sondern mit ~~~

[Rolf B]

Hallo marlem,

auf den ersten Blick klingt deine neue Frage so, als wärest Du komplett informationsresistent, weil dedlfix Dir ja sehr genau gesagt hat, was Du tun sollst. Aber ich glaube, damit liege ich falsch, und dein Problem ist die miniMap.

Es sieht so als, als wolltest Du darin ein Set aus mehreren Texten verwalten.

Problem: der localStorage kann Strings speichern. NUR Strings. D.h. wenn die Minimap ein Objekt ist, das unter verschiedenen Schlüsseln verschiedene Textinhalte speichert, musst Du sie vor dem Speichern im localStorage serialisieren. Da bietet sich JSON an:

   var jsonMap = JSON.serialize(miniMap);
   window.localStorage.setItem("storedText", jsonMap);

Beim Einstieg in die Seite musst Du den Inhalt von window.localStorage.getItem("storedText") mit JSON.parse wieder in die Minimap zurückverwandeln.

Hat das den Knoten platzen lassen?

Rolf

[marlem]

Hallo Rolf,

vielen Dank für Deine ausführliche Antwort. Mir fehlt in Javascript die Übung, ich brauche es nur alle 3-4 Jahre mal. Deswegen wollte ich auch eine ausführliche Dokumentation mit Beispielen.

[marlem]

Ich habe das hier versucht:

function textSpeichernUnter(textEingabe) {
	
	// Abfrage wie der gespeicherte Text heißen soll
	var vTextname = prompt("Wie soll der gespeicherte Text heißen?", "");
	localStorage.setItem(vTextname, JSON.parse(textEingabe));
	alert(localStorage.getItem(vTextname);
	
}

Die alert-Zeile wird nicht ausgeführt. Ich kann nicht überprüfen ob setItem geklappt hat.

[Matthias Apsel]

Hallo marlem,

schau dir mal die Formatierungshilfe zu diesem Forum an. Zu finden unter dem roten Fragezeichen in der Zeile oberhalb des Textfeldes.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo marlem,

Ich habe das hier versucht:

function textSpeichernUnter(textEingabe) {
	
	alert(localStorage.getItem(vTextname);
	
}

Die alert-Zeile wird nicht ausgeführt.

Fehlt da vielleicht eine Klammer? Was sagt die Konsole? Vielleicht
SyntaxError: missing ) after argument list?

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

stimmt, die fehlt auch. Aber dank des JSON.parse("some non json data") wird er nie bis dahin kommen und statt dessen mit

Uncaught SyntaxError: Unexpected token ... in JSON at position ... at JSON.parse (<anonymous>) at <anonymous>:1:6

aus der Kurve fliegen.

Ich sollte vielleicht meine Signatur wechseln: ceterum censeo instrumenta aedificatori esse utilis

Oder vielleicht: legere erudit

(au weia, bestimmt rumpelt es jetzt in Ciceros Grab, und Cato senior murmelt etwas von coloniam esse delendam)

Rolf

[Rolf B]

Hallo marlem,

das hier hast Du Dir aber schon mal angeschaut? Und den grundsätzlichen Sinn von JSON.parse und JSON.stringify hast Du verstanden? Ich rede nicht von den Callbacks, die man da einbauen kann, das ist für Fortgeschrittene und hier auch nicht nötig.

Die alert-Zeile wird nicht ausgeführt.

Kann auch nicht. JSON.parse() erwartet einen JSON-String und liefert ein Objekt. Wenn Du ihm einen String aus einem Eingabefeld vorwirft, ist das ziemlich sicher kein JSON-String. In dem Fall fliegt eine Exception - die Du übrigens in der Konsole der Browser-Entwicklerwerkzeuge siehst.

Von einem Objekt hast Du aber nichts, wenn Du setItem aufrufst. Diese Methode erwartet Strings.

Wenn überhaupt, müsstest Du also ein Objekt in einen String umwandeln (das hatte ich gestern abend mit .serialize angedeutet), aber das ist nur sinnvoll wenn Du auch ein Objekt - wie diese miniMap aus deinen ersten Beispielen - hast. Wenn es wie jetzt von Dir gezeigt nur um die Eingabe aus einem Textfeld geht, dann hast Du bereits einen String und musst gar nichts umwandeln.

Ich kann nicht überprüfen ob setItem geklappt hat.

Doch. Verwende deine Browser-Entwicklerwerkzeuge. Wenn Du damit nichts anfangen kannst: Es gibt MASSIG Tutorien dazu, auf Youtube und anderswo. Ohne die Entwicklerwerkzeuge stocherst Du hilflos im Nebel.

• da siehst Du die Exception von JSON.parse
• da kannst Du Breakpoints setzen und deinen Code Befehl für Befehl ausführen
• da kannst du inspizieren, was in deinen Variablen drin ist.

Den Code vollständig für Dich schreiben kann ich nicht, dazu fehlt mir der Rest deiner Seite.

Rolf

[pl]

Hier ein schönes CODE Beispiel. Viel Spaß damit! MFG