Как я могу использовать куки для запоминания кнопки или класса в html?

Question

Как я могу использовать куки, чтобы запомнить, включен ли темный режим, и сохранить его активным?

Вот мой код:

$(".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

Хотя ответ Джонатана действительно хорошо отвечает на ваш вопрос, я хочу показать, как это можно сделать с помощью 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");
    }
});

Это немного прощереализовать, чем куки, и даст вам подобное постоянство

Answer 2

Вы можете установить куки с простым javascript, используя document.cookie. Что касается вашего примера кода, я бы порекомендовал переместить функциональность 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();
  }
});