让用户在深色模式和浅色模式之间进行选择（保存每个页面的设置，cookies？）

Question

我最近刚刚开始使用 javascript 和 jQuery，所以我不是专家，目前我正在努力解决我认为可以称为“基本任务”的问题？

我想在主页上添加两个按钮，用户可以使用它们将网站模式设置为深色或浅色。当用户进入网站并单击不同的链接时，应该记住这些设置。

到目前为止，我已经添加了更改 onClick 背景颜色和字体颜色的功能，但我只能在当前页面上执行此操作。

我想我必须以某种形式使用cookies..？

这是我的小提琴：http://jsfiddle.net/sqn47kmt/10/这是我的代码

$(document).ready(function($) {
  $(".darkmode").click(function() { // darkmode for basic body, adds css styles on click
    $("html").addClass("darkclass");
  });

  $(".darkmode").click(function() { // darkmode for headline body, adds css styles on click
    $("h3").addClass("darkclass");
  });

  $(".darkmode").click(function() { // darkmode for links, adds css styles on click
    $("a").addClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for basic body, removes css styles on click
    $("html").removeClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for headlines, removes css styles on click
    $("h3").removeClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for links, removes css styles on click
    $("a").removeClass("darkclass");
  });
});

Answer 1

首先，在同一元素上为同一事件设置多个重复的事件处理程序是完全多余的。您可以将所有逻辑放在一个处理程序中。也就是说，将类单独添加到 JS 中的这些元素并不是一个好主意，因为它将 UI 和 JS 联系得太紧密。

更好的想法是更改 JS 逻辑，使其仅在body. 然后，您可以根据该主体类简单地修改所有相关元素的 CSS。这样，您只需修改 CSS 即可更改“深色模式”的 UI。

要保存状态，您可以使用 cookie 或 localStorage，然后在页面加载时从中读取。下面的示例使用 localStorage，但 cookie 的模式是相同的。

$(document).ready(function($) {
  var mode = localStorage.getItem('mode');
  if (mode) 
    $('body').addClass(mode);

  $(".darkmode").click(function() {
    $("body").addClass("darkclass");
    localStorage.setItem('mode', 'darkclass');
  });

  $(".normalmode").click(function() {
    $("body").removeClass("darkclass");
    localStorage.setItem('mode', null);
  });
});

body.darkclass h3,
body.darkclass a {
  background-color: black;
  color: white;
}

工作示例