allerAnfangIstSchwer: localStorage

Hallo zusammen,

ich habe eine Frage zu localStorage, bei der ich nicht weiß, wie ichs anpacken soll und ich hoffe, ihr könnt mir helfen...

Ich möchte ein JavaScript-Programm erstellen, bei dem auf einem Foto bestimmte Bereiche markiert werden können (div wird erzeugt). Es soll eine Art "Lernprogramm" für Kinder sein, die dann nach bestimmten Personen oder Dingen auf dem Bild suchen sollen.

Mein Problem ist nun: Es sollen die erzeugten Markierungen dauerhaft dem entsprechend ausgewählten Foto zugeordnet werden, schließlich mag man ja nicht bei jedem neuen Öffnen wieder von vorne anfangen (= erst wieder neu markieren). Ich müsste also einen localStorage erzeugen, aber wie kann ich die Zuordnung zu einem bestimmten Foto herstellen?? Geht das überhaupt, wenn "nur" ein neues Foto im Programm geladen wird? Mit einem normalen localStorage werden einfach die "alten Markierungen" (des vorherigen Fotos) automatisch auf ein neues, ganz anderes Foto übernommen - und das passt ja nicht.

Ich hatte mir überlegt, den localStorage nach dem entsprechenden Foto zu benennen, also statt im Beispiel unten -localStorage["test"]- irgendwie -localStorage[fotodatei]-, also eine variable Bezeichnung zu verwenden. Das funktioniert aber nicht. Darf dort evtl. keine Variable verwendet werden und muss hier ein definierter String stehen?

Nachfolgend ein Code-Beispiel, später sollen die Fotos auch mal mit einer Dateiauswahl geladen werden, aber jetzt erst mal vereinfacht so

function auswahlübergabe(){
	var fotodatei = document.getElementById("auswahlfeld").value;
	body.style.backgroundImage = "url(" + fotodatei + ".jpg)";         // Name der Fotos wird im Beispiel als bekannt vorausgesetzt
}

function zeichne(event){
	var bezeichnung = window.prompt("Bitte Markierung benennen.");
        if (bezeichnung){
	var wertX = event.clientX.toFixed(0);
	var wertY = event.clientY.toFixed(0);
	var eckeLinksObenX = wertX - 50;
	var eckeLinksObenY = wertY - 50;
	var newFace = document.createElement("div");
	newFace.setAttribute("id", bezeichnung);
	newFace.setAttribute("style", "left: " + eckeLinksObenX + "px; top: " + eckeLinksObenY + "px; width: 100px; height: 100px; border: 1px solid red;");
	document.getElementById("body").appendChild(newFace);
	}
	var mitnahme = bezeichnung + "*" + eckeLinksObenX + "-" + eckeLinksObenY;       // Hier wird der String zusammengesetzt
	felder.push(mitnahme);                                  // Dieser String dann in ein Array gepackt (gibt ja mehrere Markierungen)
	localStorage["test"] = JSON.stringify(felder);          // Hier wird das Array in den localStorage gepackt
}

felder = JSON.parse(localStorage["test"]);                      // Das Array wird wieder geladen und "aufbereitet"

for (i=0;i<felder.length;i++){                                               // Anschließend wird der String wieder zerlegt...
	var sternchen = felder[i].indexOf("*");
	var bezeichner = felder[i].substring(0, sternchen);
	var minus = felder[i].indexOf("-");
	var lefter = felder[i].substring(sternchen+1, minus);
	var toper = felder[i].substring(minus+1);
	
	var oldFace = document.createElement("div");                        // ...und eine Markierung erzeugt.
	oldFace.setAttribute("id", bezeichner);
	oldFace.setAttribute("style", "left: " + lefter + "px; top: " + toper + "px; width: 100px; height: 100px; border: 1px solid red;");
	document.getElementById("body").appendChild(oldFace);
}

Ich hoffe auf eure Hilfe.

Vielen Dank.

  1. Tach!

    Ich hatte mir überlegt, den localStorage nach dem entsprechenden Foto zu benennen, also statt im Beispiel unten -localStorage["test"]- irgendwie -localStorage[fotodatei]-, also eine variable Bezeichnung zu verwenden. Das funktioniert aber nicht. Darf dort evtl. keine Variable verwendet werden und muss hier ein definierter String stehen?

    „Funktioniert nicht“ funktioniert nicht als Fehlerbeschreibung. Steht denn in der Variable das drin, was du erwartest? Ein Stringliteral wird dort jedenfalls nicht nur erwartet.

    dedlfix.