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

【问题标题】：How can I save multiple class toggle state to local storage?如何将多个类切换状态保存到本地存储？
【发布时间】：2020-04-08 22:53:41
【问题描述】：

我查看了许多 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'));
})

在刷新时，背景会恢复为灰色，并且不会像应有的那样保存没有背景。任何帮助将不胜感激。

【问题讨论】：

标签： local-storage

【解决方案1】：

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

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

【讨论】：

感谢您，但是我应该注意，由于我当前的样式，我无法按照您的建议在标签内移动输入。我试过你的建议，但没有奏效。我检查了我的本地存储，它只是说'假'。还有其他建议吗？
有一个错误，应该为输入 blog-1 分配一个点击事件。 $('#blog-1').on('click', ... 这可能会触发输入和标签点击的点击事件，但您必须将输入元素放在标签内。

【解决方案2】：

在控制台中花了很多时间后，我终于想通了：

$(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 属性，这是我从 fiddle 获得的。另一个问题是，在重新格式化我的代码后，由于我正在删除一个类，所以在 if 语句中将“true”更改为“false”。

【讨论】：