Как сохранить состояние переключения нескольких классов в локальном хранилище?

Question

Я просмотрел многие похожие вопросы и ответы на них, и я застрял, пытаясь найти рабочее решение. У меня есть несколько div с одинаковыми именами классов (они созданы в al oop), и их переключенное состояние должно оставаться на refre sh. Вот html, с которым я работаю:

<div class="bg-gray">
  <div class="customize-card-md">
   <input id="blog-1" class="customize-select" type="checkbox">
   <label class="js-blog-select"></label>
  </div>
</div>

При нажатии удаляется класс bg-grey, который я использую так:

$('.js-blog-select').on('click', function(event) {
    $(this).closest('.customize-card-md').toggleClass('bg-gray');
})

Это jquery отлично работает сейчас. Как примечание, это написано таким образом из-за стиля для метки, который позволяет кликать всю метку, а также иметь дело с некоторыми пузырящимися / распространяющимися проблемами с подобными именами классов по щелчку. После того, как я прочитал столько документации , сколько я мог, я попытался включить ее, чтобы сохранить в локальном хранилище. Я совершенно новичок в использовании файлов cookie и localalstorage, но это то, что у меня пока не работает:

if (localStorage.getItem('togglebg') === 'true') {
    $(this).closest('.customize-card-md').toggleClass('bg-gray');
}

$('.js-blog-select').on('click', function(event) {
    $(this).closest('.customize-card-md').toggleClass('bg-gray');
    localStorage.setItem('togglebg', $(this).hasClass('bg-gray'));
})

При обновлении sh фоны снова становятся серыми и не сохраняются без фона, как и должно быть. Любая помощь будет принята с благодарностью.

Answer 1

Я наконец понял это после того, как провел кучу времени в консоли:

$(function() {

    $('.js-blog-select').on('click', function() {
        $(this).closest('.customize-card-md').toggleClass('bg-gray-xlight');
        window.localStorage.setItem('togglebg' + this.dataset.id, $(this).closest('.customize-card-md').hasClass('bg-gray-xlight'));
    });
    $('.js-blog-select').each(function() {
        var id = 'togglebg' + this.dataset.id;
        if (localStorage.getItem(id) && localStorage.getItem(id) == "false") {
            $(this).closest('.customize-card-md').removeClass('bg-gray-xlight');
          }

    });
});

Одна проблема заключалась в том, что каждая метка в моем коде имела уникальный атрибут data-id, который я получил из этого скрипка . Другой проблемой, после переформатирования моего кода, было изменение «true» на «false» в операторе if , так как я удалял класс.

Answer 2

Вы можете проверить следующий скрипт, связанный с сохранением выбора локально.

<div class="bg-gray">
    <div class="customize-card-md">
        <label class="js-blog-select">
            <!-- move input inside label -->
            <input id="blog-1" class="customize-select" type="checkbox"> Blog 1
        </label>
    </div>
</div>

/* initialize using the localStorage value */
if (localStorage.togglebg === "true") {
    $('#blog-1').attr("checked", "true");
} else {
    $(this).closest('.customize-card-md').parent().removeClass('bg-gray');
}

/* on input click */
$('#blog-1').on('click', function(event) {
    $(this).closest('.customize-card-md').parent().toggleClass('bg-gray');
    localStorage.togglebg = $(this).closest('.customize-card-md').parent().hasClass('bg-gray');
})