• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Local Storage für Javascript Änderungen

Mokkor

New member
Guten Tag,

da ich leider wenig ahnung von Javascript habe wollte ich einmal fragen ob mir jemand eine Lösung basteln kann?
Ich habe folgendes Problem, auf meiner Webseite kann man mit Javascript zum Beispiel das Hintergrundbild ändern oder eine Uhr anzeigen lassen. Aktuell ist es so, dass man nach jedem Neustart der Seite wieder alles einstellen muss, dies möchte ich mit Local Storage umgehen. Ich habe mich zwar belesen und auch schon Versuche unternommen aber irgendwie klappt es nicht so wie ich wollte. Eigentlich gar nicht.

Hier einmal mein Javascript Quellcode:
Code:
window.onload = function(){
	var lastClick = false;
	function setOnclick(id, image){
		var c = document.getElementById(id);
		c.onclick = function(){
			if (this !== lastClick){
				document.body.style.background = "#000 url(images/" + image + ") no-repeat center center fixed";
				document.body.style.backgroundSize = "cover";
				lastClick = false;
			}
			else {
				document.body.style.background = "";
				lastClick = this;
			}
		}
	}
	setOnclick("change", "hw3.jpg");
	setOnclick("change2", "sw1.jpg");
	setOnclick("change3", "hubi.jpg");
	setOnclick("change4", "hubi6.jpg");
	setOnclick("change5", "hubi7.jpg");
	setOnclick("change6", "sd.jpg");
	setOnclick("change7", "sdn.jpg");
	setOnclick("change8", "sdnn.jpg");
}


var interval = window.setInterval("uhr_anzeigen()", 10);

    function uhr_anzeigen() {
        var Datum = new Date();
        var stunde = Datum.getHours();
        var minute = Datum.getMinutes();
        var sekunde = Datum.getSeconds();

        Zeit = ((stunde < 10) ? " 0" : " ") + stunde;
        Zeit += ((minute < 10) ? ":0" : ":") + minute;
        Zeit += ((sekunde < 10) ? ":0" : ":") + sekunde;
        Zeit += " Uhr";

        document.getElementById('uhr').innerHTML=Zeit;
} 
	function u1() {
		document.getElementById("uhr").style.display = "none";
		document.getElementById("ue").style.display = "block";
		document.getElementById("ua").style.display = "none";
}
	function u2() {
		document.getElementById("uhr").style.display = "block";
		document.getElementById("ue").style.display = "none";
		document.getElementById("ua").style.display = "block";
}
 
Zuletzt bearbeitet von einem Moderator:
Einstellungen mit Javascript über Local Storage speichern

Guten Tag,

da ich leider wenig Ahnung von Javascript habe wollte ich einmal fragen ob mir jemand eine Lösung basteln kann?
Ich habe folgendes Problem, auf meiner Webseite kann man mit Javascript zum Beispiel das Hintergrundbild ändern oder eine Uhr anzeigen lassen. Aktuell ist es so, dass man nach jedem Neustart der Seite wieder alles einstellen muss, dies möchte ich mit Local Storage umgehen. Ich habe mich zwar belesen und auch schon Versuche unternommen aber irgendwie klappt es nicht so wie ich wollte. Eigentlich gar nicht.

Hier einmal mein Javascript Quellcode:
Code:
window.onload = function(){
	var lastClick = false;
	function setOnclick(id, image){
		var c = document.getElementById(id);
		c.onclick = function(){
			if (this !== lastClick){
				document.body.style.background = "#000 url(images/" + image + ") no-repeat center center fixed";
				document.body.style.backgroundSize = "cover";
				lastClick = false;
			}
			else {
				document.body.style.background = "";
				lastClick = this;
			}
		}
	}
	setOnclick("change", "hw3.jpg");
	setOnclick("change2", "sw1.jpg");
	setOnclick("change3", "hubi.jpg");
	setOnclick("change4", "hubi6.jpg");
	setOnclick("change5", "hubi7.jpg");
	setOnclick("change6", "sd.jpg");
	setOnclick("change7", "sdn.jpg");
	setOnclick("change8", "sdnn.jpg");
}


var interval = window.setInterval("uhr_anzeigen()", 10);

    function uhr_anzeigen() {
        var Datum = new Date();
        var stunde = Datum.getHours();
        var minute = Datum.getMinutes();
        var sekunde = Datum.getSeconds();

        Zeit = ((stunde < 10) ? " 0" : " ") + stunde;
        Zeit += ((minute < 10) ? ":0" : ":") + minute;
        Zeit += ((sekunde < 10) ? ":0" : ":") + sekunde;
        Zeit += " Uhr";

        document.getElementById('uhr').innerHTML=Zeit;
} 
	function u1() {
		document.getElementById("uhr").style.display = "none";
		document.getElementById("ue").style.display = "block";
		document.getElementById("ua").style.display = "none";
}
	function u2() {
		document.getElementById("uhr").style.display = "block";
		document.getElementById("ue").style.display = "none";
		document.getElementById("ua").style.display = "block";
}
 
Morgen, also hier mal mein Versuch.


Code:
window.onload = function(){
	var lastClick = false;
	function setOnclick(id, image){
		var c = document.getElementById(id);
		c.onclick = function(){
			if (this !== lastClick){
				document.body.style.background = "#000 url(images/" + image + ") no-repeat center center fixed";
				document.body.style.backgroundSize = "cover";
				lastClick = false;
			}
			else {
				document.body.style.background = "";
				lastClick = this;
			}
		}
	}
	setOnclick("change", "hw3.jpg");
	setOnclick("change2", "sw1.jpg");
	setOnclick("change3", "hubi.jpg");
	setOnclick("change4", "hubi6.jpg");
	setOnclick("change5", "hubi7.jpg");
	setOnclick("change6", "sd.jpg");
	setOnclick("change7", "sdn.jpg");
	setOnclick("change8", "sdnn.jpg");
	localStorage.getItem('Uhr')
}


function u2() {
		document.getElementById("uhr").style.display = "block";
		document.getElementById("ue").style.display = "none";
		document.getElementById("ua").style.display = "block";
		localStorage.setItem('Uhr',test);
}
 
Wie kommt denn die function u2() zu der Variable test? Da musst du entweder was als Parameter übergeben oder etwas zuweisen. Das gilt aber immer und hat mit LS nichts zu tun.
 
Achso, okay. Dann war die Erklärung welche ich gelesen habe Mist.

Ich muss also einen Wert zuweisen, dann so?

Code:
localStorage.setItem('Uhr',document.getElementById("uhr").style);

Sprich speichert er dann die Werte für den Style von "uhr" ?? Oder?
Gruß
 
Also da wo ich es gelesen habe, stand nur Quark.

Mein Quelltext sieht jetzt so aus:

Code:
window.onload = function(){
	localStorage.getItem('test')
}


var interval = window.setInterval("uhr_anzeigen()", 10);

    function uhr_anzeigen() {
        var Datum = new Date();
        var stunde = Datum.getHours();
        var minute = Datum.getMinutes();
        var sekunde = Datum.getSeconds();

        Zeit = ((stunde < 10) ? " 0" : " ") + stunde;
        Zeit += ((minute < 10) ? ":0" : ":") + minute;
        Zeit += ((sekunde < 10) ? ":0" : ":") + sekunde;
        Zeit += " Uhr";

        document.getElementById('uhr').innerHTML=Zeit;
} 
	function ua() {
		document.getElementById("uhr").style.display = "none";
		document.getElementById("ue").style.display = "block";
		document.getElementById("ua").style.display = "none";

}
	function ue() {
		document.getElementById("uhr").style.display = "block";
		document.getElementById("ue").style.display = "none";
		document.getElementById("ua").style.display = "block";
		localStorage.setItem('test',document.getElementById("uhr").style);
}

Ich versuche jetzt die daten aus dem LS beim laden der Seite abzurufen.

Gruß
 
.style kann so nicht im localStorage gespeichert werden, da das ein Objekt und kein String ist. Du könntest aber z.B. .style.display speichern.
Wenn du das dann ausliest, musst du den Rückgabewert natürlich auch irgendwie verarbeiten - also in deinem Fall wieder der CSS-Eigenschaft zuordnen.
 
Hallo kkapsner,

habe es jetzt so gelöst:

Code:
window.onload = function(){
	document.getElementById("uhr").style.display = localStorage.getItem('test')
	
}

geht auch, ist nicht perfekt aber erst einmal funktioniert es.

Danke für eure Hilfe. Wenn ich noch etwas habe, dann melde ich mich wieder.
 
Zurück
Oben