通过Jquery记住颜色选择（localStorage）

Question

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

但是我必须比预期的要大，因为我无法执行此工作。将脚本上载到服务器并在站点上对其进行测试时，可以更改颜色，但是如果我关闭，则窗口，然后再次转到我的网站，颜色恢复为默认值。它不被记住/存储。

问题是否可能源于我的文本框使用“行”类设置背景色，并且您不能将一个类更改为另一个类，而必须使用适当的元素或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');
    }); }

我的HTML

/*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

登录中的某些更改，未经测试，但应该可以使用

$(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 2

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