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

Question

如何使用 cookies 记住暗模式是否打开并保持激活状态？

这是我的代码：

 $(".inner-switch").on("click", function() { if ($("body").hasClass("dark")) { $("body").removeClass("dark"); $(".inner-switch").text("OFF"); } else { $("body").addClass("dark"); $(".inner-switch").text("ON"); } });

 body { font-family: sans-serif; font-size: 1.125rem; display: flex; flex-direction: column; max-width: 50rem; margin: 0 auto; padding: 0 0.9375rem; } small { font-style: italic; } article { display: flex; flex-direction: column; } img { max-width: 100%; display: block; align-self: center; }.switch { align-self: flex-end; margin: 0.9375rem; }.inner-switch { display: inline-block; cursor: pointer; border: 1px solid #555; border-radius: 1.25rem; width: 3.125rem; text-align: center; font-size: 1rem; padding: 0.1875rem; margin-left: 0.3125rem; }.dark, .dark * { background-color: #222; color: #e6e6e6; border-color: #e6e6e6; }

 <div class="switch">Dark mode: <span class="inner-switch">OFF</span> </div> <h1 class="title">Lorem ipsum dolor sit amete</h1> <article> <h1>consectetur adipiscing elit.</h1> <p><small>Morbi hendrerit accumsan vulputate.m</small></p> <p>...</p> </article> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>

Answer 1

您可以使用document.cookie将 cookies 设置为普通的 javascript 。 关于您的示例代码，我建议在单独的函数中移动 darkMode 功能（启用/禁用）。 然后在页面加载完成时读取 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);
}

使用 darkMode 函数的按钮单击事件

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

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

document.addEventListener("DOMContentLoaded", function(){
  var darkMode = getCookie('darkMode');
  if (darkMode == "1") {
      // use darkmode
      enableDarkMode();
  } else {
      // no darkmode
      disableDarkMode();
  }
});

Answer 2

虽然乔纳森的回答确实很好地回答了你的问题，但我确实想展示如何使用 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");
    }
});

这比 cookies 实现起来稍微简单一些，并且会给你类似的持久性