我如何将多个类的切换状态保存到本地存储？

Question

我已经研究了许多similar问题及其答案，但我一直在努力寻求可行的解决方案。我有多个具有相同类名的div（它们是在循环中创建的），并且它们的切换状态需要保持刷新状态。这是我正在使用的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-gray类，我正在使用它：

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

此jquery目前可以正常工作。附带说明一下，之所以这样写，是因为标签的样式使整个标签都是可单击的，并且还可以处理单击时具有类似类名的某些冒泡/传播问题。在尽可能多地阅读了documentation之后，我尝试了以下操作，我试图将其合并以保存到本地存储中。我对使用cookie和localstorage很陌生，但是到目前为止，这是行不通的：

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'));
})

刷新时，背景会恢复为灰色，并且不会按原样保存无背景。任何帮助将不胜感激。

Answer 1

您可以检查以下脚本关联到本地的选择保存。

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

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

/* on label click */
$('.js-blog-select').on('click', function(event) {
    $(this).parent().toggleClass('bg-gray');
    localStorage.togglebg = $(this).parent().hasClass('bg-gray');
})