通过Jquery(localStorage)记住颜色选择

Question

我创建了一个非常简单和基本的Jquery脚本，该脚本更改了我网站上的文本框的类，以便在单击按钮时它们具有不同颜色的背景。然后，我尝试(在Jquery-for-dummies-book的帮助下(对其进行设置，以便在本地记住颜色选择。

然而，我必须是一个比预期更大的"假人"，因为我无法完成这项工作。当我将脚本上传到服务器并在网站上进行测试时，我可以更改颜色，但是如果我关闭该窗口然后再次转到我的网站，则颜色将恢复为默认值。它不会被记住/存储。

问题是否可能源于我的文本框使用类"行"来设置背景颜色，并且您不能将类更改为其他类，而必须使用适当的元素或 ID？或者脚本部分的顺序应该不同？ 在我的学习之旅中，任何和所有的洞察力都会受到赞赏。

外部脚本

$(document).ready(function(){
if (localStorage.getItem("farvevalg")=="farve") { $(".row").addClass("farve");
}
if ($(".row").hasClass("farve")) {
localStorage.setItem("farvevalg", "farve");
} else {localStorage.removeItem("farvevalg")}
$('#farvevalg').click(function(){
$(".row").toggleClass('farve');
}); }

我的网页

/*The default color of all textboxes on a page*/
.row {background-color: #e7e7e7;}
/*The color that it changes into when button is clicked*/
.farve {background-color: pink;}
/*The button that must be clicked to change color*/
#farvevalg {
margin-top: 6%;
padding: 5px;
}

Answer 1

您的尝试是正确的，但是在错误的位置添加/删除了本地存储。您应该在该按钮单击中执行此操作。

工作小提琴

由于 CORS 问题，代码段将不起作用。它仅适用于代码视图。

$(document).ready(function () {
if (localStorage.getItem("farvevalg") == "farve") {
$(".row").addClass("farve");
}
$('#farvevalg').click(function () {
$(".row").toggleClass('farve');
if ($(".row").hasClass("farve")) {
localStorage.setItem("farvevalg", "farve");
} else {
localStorage.removeItem("farvevalg")
}
});
});

/*The default color of all textboxes on a page*/
.row {background-color: #e7e7e7;}
/*The color that it changes into when button is clicked*/
.farve {background-color: pink;}
/*The button that must be clicked to change color*/
#farvevalg {
margin-top: 6%;
padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="row">
Test
</div>
<button id="farvevalg">
Change
</button>

Answer 2

登录中的一些更改，未经测试，但应该可以工作

$(document).ready(function(){
if (localStorage.getItem("farvevalg")=="farve") { 
$(".row").addClass("farve");
}

$('#farvevalg').click(function(){
//only here we add/remove setting
var wasFarveColor = $(".row").hasClass("farve")
$(".row").toggleClass('farve');
if(wasFarveColor)
localStorage.removeItem("farvevalg")
else
localStorage.setItem("farvevalg", "farve")
}); 
})

Answer 3

您正在做的是，在应用程序开始时，检查它是否有一个值为"farve"的已保存项目"farvevalg"。如果是这种情况，则将类 'farve' 添加到所有具有类 'row' 的元素中。 在此之后，您检查是否存在具有类"farve"的行元素，如果是这种情况，则将该项目设置为存储，否则将其删除。如您所见，这段代码在这里没有意义，因为它不会产生任何影响。相反，您应该将此 if/else 块移动到单击回调内(在$(".row").toggleClass('farve');之后

(