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

Posted 2021-05-06

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

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

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

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

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

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

答案

首先，在同一元素上为同一事件提供多个重复事件处理程序是完全多余的。您可以将所有逻辑放在一个处理程序中。也就是说，将这些类单独添加到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

另一答案

您可以使用window.localStorage设置cookie。

$(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 cookies的主体末尾添加脚本以下的按钮。

<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>

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