7
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):
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
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
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 351985
Url: https://administrator.de/contentid/351985
Ausgedruckt am: 22.11.2024 um 20:11 Uhr
7 Kommentare
Neuester Kommentar
Schreib doch einen "Keks", hie die Funktionen zum setzen und auslesen von Keksen:
Für LocalStorage, ists ja noch einfacher, hier nachzulesen:
https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
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 "";
}https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
Hallo, danke, aber wie gesagt, ich bin Anfänger und das übersteigt leider (noch) meine Fähigkeiten 
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.
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.
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.
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>
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.
Das funktioniert mit deinem Script wahrscheinlich nicht, wenn es ich es richtig sehe?
Danke nochmals.
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 ...
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 ...
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.
Wie gesagt, danke für die bisherige Hilfe, aber den letzten Kommentar hättest du dir sparen können.
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.
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.
