让用户在暗模式和亮模式之间进行选择（保存每个页面的设置，cookie？）答案

【问题标题】：Let the user choose between dark and light mode (save settings for every page, cookies?)让用户在暗模式和亮模式之间进行选择（保存每个页面的设置，cookie？）
【发布时间】：2018-11-30 13:18:18
【问题描述】：

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

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

到目前为止，我已经添加了改变背景颜色和字体颜色 onClick 的功能，但我只能在当前页面上这样做。

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

这是我的小提琴：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");
  });
});

【问题讨论】：

标签： javascript jquery cookies colors

【解决方案1】：

您可以使用window.localStorage 来设置cookies。

$(document).ready(function () {
    //check the button which is clicked
     var darkClick = localStorage.getItem('darkBtnClicked'),
         normalClick =
         localStorage.getItem('normalBtnClicked');

     if (darkClick == "true") {
         console.log('clicked on dark');
         $("html, h3, a, body").addClass("darkclass");
     }
     if (normalClick == "true") {
         console.log('clicked on normal');
         $("html, h3, a, body").removeClass("darkclass");
     }


     //on click of the button add the class we need a nd set the cookies
     $(".darkmode").click(function () {
         //Adding class to all the elements you need in just one line.
         $("html, h3, a, body").addClass("darkclass");
         //setting cookies for the button click
         localStorage.setItem('darkBtnClicked', true);
         localStorage.setItem('normalBtnClicked', false);
     });

     $(".normalmode").click(function () {
         $("html, h3, a, body").removeClass("darkclass");
           //setting cookies for the button click
         localStorage.setItem('normalBtnClicked', true);
         localStorage.setItem('darkBtnClicked', false);
     });
 });

在正文末尾为 jQuery 和 For cookie 添加脚本后面的按钮。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

即使您重新加载页面并通过网站重定向页面，这也应该有效。

【讨论】：

【解决方案2】：

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

一个更好的主意是更改您的 JS 逻辑，使其仅在 body 上设置类。然后，您可以简单地根据该 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

【讨论】：