xsto123
Goto Top

LocalStorage für folgende Funktion

Hallo,

ich bin Javascript Anfänger und habe folgende Funktion geschrieben mit deren Hilfe ich mehrere <div class="price-box"> per Button-Click ausblenden kann (indem ich die neue css-Klasse "hideprice" hinzufüge):

function myFunction() {
var x = document.querySelectorAll(".price-box");  
var i;
for (i = 0; i < x.length; i++) {
        x[i].classList.toggle("hideprice");  
     }
}

Das funktioniert soweit auch, nur müsste ich die Einstellung (<div class="price-box"> ein- bzw. ausgeblendet) nun eben für den Besucher auch noch speichern, sodass die Einstellung bei Seitenwechsel/neu laden nicht verloren geht. Wäre das per localStorage möglich und falls ja, wie müsste ich meine Funktion erweitern?

Für einen Anfänger ist das ganz schön schwierig. Ich bin schon etwas stolz auf meine obere Funktion ;)

Vielen Dank

Content-ID: 351985

Url: https://administrator.de/forum/localstorage-fuer-folgende-funktion-351985.html

Ausgedruckt am: 25.12.2024 um 20:12 Uhr

134464
134464 17.10.2017 aktualisiert um 17:52:44 Uhr
Goto Top
Schreib doch einen "Keks", hie die Funktionen zum setzen und auslesen von Keksen:
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();  
	document.cookie = cname + "=" + cvalue + "; " + expires;  
}
function getCookie(cname){
	var name = cname + "=";  
	var ca = document.cookie.split(';');  
	for(var i=0; i<ca.length; i++)
	  {
	  var c = ca[i].trim();
	  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
	}
	return "";  
}
Für LocalStorage, ists ja noch einfacher, hier nachzulesen:
https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
xsto123
xsto123 17.10.2017 um 18:14:12 Uhr
Goto Top
Hallo, danke, aber wie gesagt, ich bin Anfänger und das übersteigt leider (noch) meine Fähigkeiten face-sad Ich weiß leider schon gar nicht, wie und wo ich die localStorage Funktion einbauen müsste.

Ist ein Cookie denn die bessere Lösung? Falls ja, kann ich deinen Code einfach so übernehmen und meinem Script hinzufügen sodass es dann funktioniert?

Danke noch mal und sorry, dass ich so doof frage.
134464
134464 18.10.2017 aktualisiert um 11:50:21 Uhr
Goto Top
Cookie oder localStorage ist Geschmackssache. Ältere Browser unterstützen aber vielfach localStorage nicht, das nur zur Info.

Hier ein Beispiel für localstorage, für Cooies oben eben die Funktionen benutzen wenn gewünscht.
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Test</title>
</head>
<style type="text/css">  
	.hide {visibility:hidden}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(e) {
	var visible = window.localStorage.getItem("visiblestate");  
    if (visible != null){
		var el = $('#testdiv');  
		if (visible == "true"){  
			el.show();
		}else{
			el.hide();
		}
	}
});
function ToggleState(){
	var el = $('#testdiv');  
	el.fadeToggle(500,"swing",function(){  
		window.localStorage.setItem("visiblestate",el.is(":visible"));	  
	});
}
</script>
<body>
<div id="testdiv" class="show" style="background-color:#FC0;width:100px;height:100px"></div>  
<p>
  <input type="button" value="Toggle" onClick="ToggleState()" />  
</p>
</body>
</html>
xsto123
xsto123 18.10.2017 um 14:08:32 Uhr
Goto Top
Hallo, ich danke dir. Das Problem ist, dass ich mehrere <div class="versteckmich"> ausblenden muss und nicht nur ein <div id="testdiv">. Daher habe ich in meinem Script document.querySelectorAll verwendet.

Das funktioniert mit deinem Script wahrscheinlich nicht, wenn es ich es richtig sehe?
Danke nochmals.
134464
134464 18.10.2017 aktualisiert um 15:06:02 Uhr
Goto Top
Och mönsch, jetzt benutz doch mal die Birne, einfach eine Foreach-Schleife hernehmen oder eben bei jQuery möglich direkt nur den Selector anpassen, der wendet dann die Aktion automatisch auf alle den selektor betreffenden Elemente an.
Den Input wie du Einstellungen aus dem local Storage speicherst und wiederherstellst habe ich dir ja oben gezeigt, ein bisschen musst du dich schon anstrengen, von selbst ist nur der gefadder tot!
Hier muss man aber echt jeden Furz vorbeten ... Man man man ...
xsto123
xsto123 18.10.2017 um 15:43:02 Uhr
Goto Top
Auch wenn du es dir vielleicht nicht vorstellen kannst, aber Programmieren gehört auch 2017 noch nicht zu den Standard-Fertigkeiten, wie Rechnen und Schreiben.

Wie gesagt, danke für die bisherige Hilfe, aber den letzten Kommentar hättest du dir sparen können.
134464
134464 18.10.2017 aktualisiert um 15:55:28 Uhr
Goto Top
Aber mitdenken schon, zumal du mit dem Code von oben schon das Gerüst hast.
Wenn das noch zu viel für dich ist, übe halt noch etwas und werfe nicht gleich die Flinte ins Korn wenn die Anforderung minimal anders ist.