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

Question

我最近才开始使用 javascript 和 jQuery，所以我不是专家，目前我正在为我认为可以称为“基本任务”的事情而苦苦挣扎？

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

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

我假设我必须以某种形式使用 cookie..？

这是我的 fiddle :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;
}

Working example