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

Mokkor · 20. Juni 2017

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";
}

Mokkor · 20. Juni 2017

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";
}

mikdoe · 20. Juni 2017

* freigeschaltet *

wo ist denn der code für das ls den du versucht hast?

hier etwas zum probieren: http://forum.jswelt.de/tutorials-javascript/59118-localstorage-paar-beispiele.html

kkapsner · 20. Juni 2017

AW: Einstellungen mit Javascript über Local Storage speichern

Mokkor schrieb:
Ich habe mich zwar belesen und auch schon Versuche unternommen aber irgendwie klappt es nicht so wie ich wollte.

Zeig' doch mal deine Versuche.

Mokkor · 21. Juni 2017

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);
}

mikdoe · 21. Juni 2017

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.

Mokkor · 21. Juni 2017

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ß

mikdoe · 21. Juni 2017

Mokkor schrieb:
Ich muss also einen Wert zuweisen

Ja natürlich, das steckt ja schon im Wort .setItem()
Wo hast du das anders gelesen?

Mokkor schrieb:
dann so?

Syntaktisch ja aber das Auslesen von CSS Eigenschaften ist manchmal nicht intuitiv, zumindest nicht für mich, ich benutze dafür am liebsten jQuery.

Mokkor · 21. Juni 2017

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ß

kkapsner · 21. Juni 2017

.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.

Mokkor · 21. Juni 2017

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.

kkapsner · 22. Juni 2017

Mokkor schrieb:
ist nicht perfekt

Stimmt... aber darauf kannst du ja jetzt aufbauen.

Mokkor schrieb:
Danke für eure Hilfe.

Bitte - gern geschehen.

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

Mokkor

New member

Mokkor

New member

mikdoe

Moderator

kkapsner

Super Moderator

Mokkor

New member

mikdoe

Moderator

Mokkor

New member

mikdoe

Moderator

Mokkor

New member

kkapsner

Super Moderator

Mokkor

New member

kkapsner

Super Moderator