如何将 LocalStorage 添加到按钮以更改颜色答案

【问题标题】：How to add LocalStorage to buttons to change colors如何将 LocalStorage 添加到按钮以更改颜色
【发布时间】：2020-08-26 06:47:18
【问题描述】：

我无法将 LocalStorage 添加到按钮以更改为核心，这是 javascript 中的新功能，我们希望在我的个人博客上实现此功能。

$(document).ready(function () {

$(".header--theme-button").on("click", function() {
  var primaryColor = localStorage.getItem("--theme-primary");
  var secondaryColor = localStorage.getItem("--theme-primary");

  var primaryColor = $(this).css("--theme-primary");
  var secondaryColor = $(this).css("--theme-secondary");


  $().change(function () {
    var primaryColor = $(this).val();
    $('.header--theme-button').css("--theme-primary");
    localStorage.setItem("--theme-primary", primaryColor);
    var secondaryColor = $(this).val();
    $('.header--theme-button').css("--theme-secondary");
    localStorage.setItem("--theme-primary", secondaryColor);
  });

  $(".header--theme-button").removeClass("active");
  $(this).addClass("active");

  $(document.body).css("--primary-color", primaryColor);
  $(document.body).css("--secondary-color", secondaryColor);
});

});

HTML：https://pastebin.com/KswauZRU

CSS：https://pastebin.com/85bH2J5w

【问题讨论】：

将 localStorage 添加到按钮有点困难

标签： javascript html css local-storage

【解决方案1】：

欢迎来到stackoverflow。代码中有一些错误。主要是你覆盖了primaryColor 和secondaryColor

这应该有效：

$(document).ready(function() {
  var primaryColor = localStorage.getItem("--primary-color");
  console.log("localstorage primary: " + localStorage.getItem("--primary-color"));
  $(document.body).css("--primary-color", primaryColor);

  var secondaryColor = localStorage.getItem("secondary");
  console.log("localstorage secondary: " + localStorage.getItem("--secondary-color"));
  $(document.body).css("--secondary-color", secondaryColor);

  $( ".header--theme-button" ).each(function() {
    if($(this).css("--theme-primary")==primaryColor){
      console.log("found active element: "+primaryColor);
      $(".header--theme-button").removeClass("active");
      $(this).addClass("active");
    }
  });

  $(".header--theme-button").on("click", function() {

     $(".header--theme-button").removeClass("active");
     $(this).addClass("active");

     var primaryColor = $('.active').css("--theme-primary");
     console.log("primaryColor: " + primaryColor);
     localStorage.setItem("--primary-color", primaryColor);
     $(document.body).css("--primary-color", primaryColor);

     var secondaryColor = $('.active').css("--theme-secondary");
     console.log("secondaryColor: " + secondaryColor);
     localStorage.setItem("--secondary-color", secondaryColor);
     $(document.body).css("--secondary-color", secondaryColor);
   });
 });

我做了一个fiddle（因为本机stackoverflow内联sn-p不起作用）所以你可以直接看到它在那里工作。通过按下左上角的“运行”按钮，您重新加载代码并看到旧颜色保持不变。

干杯，保罗

【讨论】：

如何保存激活的按钮？ imgur.com/VhFB1d4
jsfiddle.net/pauloco/qhjdwzr5/37 在准备好的函数末尾包含这个 $( ".header--theme-button" ).each(function() { if($(this).css(" --theme-primary")==primaryColor){ console.log("found"); $(".header--theme-button").removeClass("active"); $(this).addClass("active "); } });
顺便问一下：您是否删除了接受的答案标签？我还将此代码添加到答案中
非常感谢您的帮助，我删除了它，因为我认为该主题将关闭并且没有更多答案，我是论坛的新手。
当然！没什么大不了的。但是这些帖子永远存在（除非有人手动删除它们）。因此，对答案和问题进行投票并将其标记为已接受的答案很有帮助。因此，其他有类似问题和搜索引擎的人会找到解决方案。很高兴我能帮上忙。

【解决方案2】：

$(document).ready(function () {

$(".header--theme-button").on("click", function() {


  var primaryColor = localStorage.getItem("tema");
  var secondaryColor = localStorage.getItem("tema2");
  console.log(localStorage.getItem("tema"));
  console.log(localStorage.getItem("tema2"));

  // var primaryColor = $(this).css("--theme-primary");
  // console.log(this);
  // var secondaryColor = $(this).css("--theme-secondary");





  $(".header--theme-button").removeClass("active");
  $(this).addClass("active");

  $(document.body).css("--primary-color", primaryColor);
  $(document.body).css("--secondary-color", secondaryColor);

  var primaryColor = $('.active').css("--theme-primary");
  localStorage.setItem("tema", primaryColor);
  console.log(primaryColor);
  console.log(localStorage.setItem($('--theme-primary'), primaryColor));
  var secondaryColor = $('.active').css("--theme-secondary");
  localStorage.setItem("tema2", secondaryColor);
  console.log(primaryColor);
  console.log(secondaryColor);

});




});

嗨！尝试这个！现在他记得最后的选择了

【讨论】：

仍然没有保存到本地存储