jQuery 在 cookie 或 localStorage 中保存 toggleClass

【问题标题】：jQuery save toggleClass in cookie or localStoragejQuery 在 cookie 或 localStorage 中保存 toggleClass
【发布时间】：2017-07-13 00:40:22
【问题描述】：

我正在尝试保存 cookie 或使用 localStorage（以哪个更好）来记住访问者何时单击加号按钮来显示/隐藏 div。任何人都可以帮助使以下代码与 cookie 或 localStorage 一起使用吗？

$('.plus').on('click', function(e) {
    $(".plus .icon .two").toggleClass('horizontal');
    $(".welcome-section").toggleClass('open');
    $(".welcome-header p").toggleClass('explore');
});

【问题讨论】：

我没有看到任何使用 cookie 的尝试。
我试图使用 if (element.hasClass("toggled")) { localStorage.setItem('toggled', 'true'); } else { localStorage.setItem('toggled', 'false'); } 但我得到的只是错误，而且让我无法理解。呃

标签： javascript jquery cookies local-storage

【解决方案1】：

我更喜欢使用localStorage：

Javascript：

var $content = $('.js-content');

if (localStorage.getItem('isVisible') === 'true') {
    $content.addClass('content_visible');
}

$('.js-button').on('click', function() {
    $content.toggleClass('content_visible');
    localStorage.setItem('isVisible', $content.hasClass('content_visible'));
});

CSS：

.content {
    display: none;
}

    .content_visible {
        display: block;
    }

HTML：

<button type="button" class="js-button">+</button>
<div class="content js-content">This is content</div>

JSFiddle

【讨论】：

如果您只有 1 个元素需要记住其状态，这很好，但如果您有更多元素怎么办。关于如何构建一个动态创建多个要检查的键的循环的任何想法？