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

我已经创建了一个非常简单和基本的Jquery脚本，它更改了我站点上文本框的类，以便在单击按钮时它们具有不同颜色的背景。然后我尝试（借助jqueryfordummies书籍）设置它，以便在本地记住颜色选择

然而，我必须是一个比预期更大的“虚拟人”，因为我无法实现这一点。当我将脚本上载到服务器并在网站上测试它时，我可以更改颜色，但如果我关闭“然后”窗口，然后再次访问我的网站，颜色将恢复为默认颜色。它不会被记住/存储

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

---

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

$(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")

      }); 
    })

---

您要做的是，在应用程序开始时，检查是否存在值为“farve”的已保存项“farvevalg”。如果是这种情况，则将类“farve”添加到类为“row”的所有元素中。

---

在此之后，您将检查是否存在类为“farve”的行元素，如果是这种情况，则在存储器中设置该项，否则将删除该项。正如您所看到的，这段代码在这里是没有意义的，因为它不会产生任何影响。您应该将此if/else块移到click回调中（在

$（“.row”）之后。toggleClass（'farve'）；

）

您的尝试是正确的，但添加/删除本地存储的位置不正确。你应该在那个按钮里点击

由于CORS问题，代码段无法工作。它仅用于代码查看。

$（文档）.ready（函数（）{
if（localStorage.getItem（“farvevalg”）=“farve”）{
$（“.row”）.addClass（“farve”）；
}
$（'#farvevalg'）。单击（函数（）{
$（“.row”）.toggleClass（'farve'）；
if（$（“.row”）.hasClass（“farve”））{
setItem（“farvevalg”、“farve”）；
}否则{
localStorage.removietem（“farvevalg”）
}
});
});
/*页面上所有文本框的默认颜色*/
.行{背景色：#e7e7e7；}
/*单击按钮时所更改的颜色*/
.farve{背景色：粉红色；}
/*必须单击才能更改颜色的按钮*/
#法维瓦格{
利润率最高：6%；
填充物：5px；
}

试验
改变
“farge”和“fargevalg”不是英语。总是用英语编码。当在问题中包含代码时，请确保它是英文的。哦，谢谢你指出这一点。这是一个一般的“最佳实践”规则，还是一个关于我错过的StackOverflow问题的规则？我总是用我自己的语言来命名特定的类名，但我和我的业余编码伙伴们都说相同的母语，所以我们从来没有讨论过是否应该用英语来命名类名和ID。这是一般编程和StackOverflow的最佳实践。在编写代码时，其他人可能需要协作并维护您编写的代码，即使是不会说英语的人。当询问有关StackOverflow的问题时，如果代码是用英语编写的，人们会更容易理解代码。