Javascript 如何使用cookies来记住html中的按钮切换或类？

我如何使用cookies来记住黑暗模式是否已打开并保持其活动状态

这是我的密码：

$（“.internal switch”）。打开（“单击”，函数（）{
if（$（“body”）.hasClass（“深色”））{
$（“body”）.removeClass（“深色”）；
$（“.internal switch”）.text（“OFF”）；
}否则{
$（“正文”）.addClass（“黑色”）；
$（“.internal switch”）.text（“ON”）；
}
});
正文{
字体系列：无衬线；
字体大小：1.125rem；
显示器：flex；
弯曲方向：立柱；
最大宽度：50雷姆；
保证金：0自动；
填充：0.9375rem；
}
小的{
字体：斜体；
}
文章{
显示器：flex；
弯曲方向：立柱；
}
img{
最大宽度：100%；
显示：块；
自对准：居中；
}
.开关{
自对准：柔性端；
保证金：0.9375雷姆；
}
.内部开关{
显示：内联块；
光标：指针；
边框：1px实心#555；
边界半径：1.25雷姆；
宽度：3.125rem；
文本对齐：居中；
字号：1rem；
填充物：0.1875雷姆；
左边距：0.3125雷姆；
}
.黑暗，
.黑暗*{
背景色：#222；
颜色：#E6；
边框颜色：#e6；
}
暗模式：
关
同侧阴唇
献祭精英。
Morbi hendrerit accumsan vulputate.m


您可以使用
document.cookie
使用纯javascript设置cookie。
关于示例代码，我建议在单独的函数中移动暗模式功能（启用/禁用）。然后在页面加载完成时读取cookie值，并根据cookie值调用函数


实现cookie逻辑

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    // the following code allows multiple cookie values and splits them apart
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}

使用darkMode函数单击按钮事件

function enableDarkMode() {
    $( "body" ).addClass( "dark" );
    $( ".inner-switch" ).text( "ON" );
    setCookie('darkMode',"1",7);
}

function disableDarkMode() {
  $( "body" ).removeClass( "dark" );
  $( ".inner-switch" ).text( "OFF" );
  setCookie('darkMode',"0",7);
}

$( ".inner-switch" ).on("click", function() {
    if( $( "body" ).hasClass( "dark" )) {
      disableDarkMode();
    } else {
      enableDarkMode();
    }
});

页面加载完毕后读取cookie（纯js）

虽然Jonathan的回答很好地回答了您的问题，但我想展示一下如何使用localStorage实现这一点，正如一条评论指出的，这是一个潜在的解决方案

$(document).on('load', () => {
    if (localStorage.getItem('dark-mode') === 'true') {
        $('body').addClass('dark')
        $('.inner-switch').text('OFF')
    }
});

$('.inner-switch').on('click', () => {
    let $body = $('body');
    let $switch = $('.inner-switch');

    if ($body.hasClass("dark")) {
        localStorage.setItem('dark-mode', 'false');
        $body.removeClass("dark");
        $switch.text("OFF");
    } else {
        localStorage.setItem('dark-mode', 'true');
        $body.addClass("dark");
        $switch.text("ON");
    }
});

这比Cookie实现起来要简单一点，并且会给你类似的持久性
，因此你希望在用户刷新页面和/或退出页面/选项卡并在同一浏览器会话中导航回页面时保持黑暗模式切换？是的，这就是我的意思，Sorry如果您有时间，我建议您考虑使用localStorage作为此问题的解决方案这里有一个使用您的代码的工作示例：我将darkmode功能移动到一个单独的函数中，并将cookie内容拆分到document.ready函数中，而按钮触发器仅使用darkmode函数。您可能还对
首选颜色方案
媒体查询，允许用户控制系统范围内的暗模式设置。谢谢，我应该将其放在html中的什么位置？只需添加到JavaScript文件就足够了虽然localStorage是一个很好的选择，尤其是在这种情况下，请记住以前的任何东西都不支持它：IE 8、Firefox 3.5、，Safari 4、Chrome 4、Opera 10.5、iOS 2.0、Android 2.0
$(document).on('load', () => {
    if (localStorage.getItem('dark-mode') === 'true') {
        $('body').addClass('dark')
        $('.inner-switch').text('OFF')
    }
});

$('.inner-switch').on('click', () => {
    let $body = $('body');
    let $switch = $('.inner-switch');

    if ($body.hasClass("dark")) {
        localStorage.setItem('dark-mode', 'false');
        $body.removeClass("dark");
        $switch.text("OFF");
    } else {
        localStorage.setItem('dark-mode', 'true');
        $body.addClass("dark");
        $switch.text("ON");
    }
});