Javascript 让用户在黑暗和光明模式之间进行选择（保存每个页面的设置，cookies？）

我最近刚刚开始使用javascript和jQuery，所以我不是一个专家，目前我正在努力完成我认为可以称之为“基本任务”的任务

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

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

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

这是我的小提琴，这是我的密码

$（文档）.ready（函数（$）{
$（“.darkmode”）。单击（function（）{//darkmode作为基本体，在单击时添加css样式
$（“html”）.addClass（“darkclass”）；
});
$（“.darkmode”）。单击（函数（）{//darkmode作为标题正文，在单击时添加css样式
$（“h3”）.addClass（“暗类”）；
});
$（“.darkmode”）。单击（函数（）{//darkmode可获得链接，单击可添加css样式
$（“a”）.addClass（“暗类”）；
});
$（“.normalmode”）。单击（函数（）{//normalmode对于基本体，单击即可删除css样式
$（“html”）.removeClass（“暗类”）；
});
$（“.normalmode”）。单击（函数（）{//normalmode可查看标题，单击可删除css样式
$（“h3”）.removeClass（“暗类”）；
});
$（“.normalmode”）。单击（函数（）{//normalmode可获取链接，单击可删除css样式
$（“a”）.removeClass（“暗类”）；
});
});

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

更好的办法是更改JS逻辑，使其只在

主体上设置类。然后，您可以简单地根据body类修改所有相关元素的CSS。这样，您只需修改CSS即可更改“暗模式”的UI

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

$（文档）.ready（函数（$）{
var mode=localStorage.getItem（'mode'）；
如果（模式）
$（'body'）.addClass（模式）；
$（“.darkmode”）。单击（函数（）{
$（“body”）.addClass（“darkclass”）；
setItem（'mode'，'darkclass'）；
});
$（“.normalmode”）。单击（函数（）{
$（“body”）.removeClass（“暗类”）；
setItem（'mode'，null）；
});
});

body.darkclass h3，
body.darkclass a{
背景色：黑色；
颜色：白色；
}

您可以使用
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和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>



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