1

I've looked over many of the similar questions and their answers and I'm stuck trying to get a working solution. I have multiple divs with the same classnames (they're created in a loop), and their toggled state needs to stay on refresh. Here's the html I'm working with: 

<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>

On click, the class bg-gray is removed, which I'm using this:

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

This jquery works fine for now. As a side note, it's written this way because of styling for the label that allows the whole label to be clickable and also to deal with some bubbling/propagation issues with similar classnames on click. What I've tried, after reading over as much documentation as I could, is the following, which I'm trying to incorporate it to save into local storage. I'm quite new to using cookies and localstorage, but this is what I have so far that is not working:

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

On refresh the backgrounds are reverted back to gray, and not saved without a background as they should be. Any help would be greatly appreciated.

Endurain
  • 25
  • 5

2 Answers2

0

You can check following script associate to selection saving locally.

<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');
})
OO7
  • 660
  • 4
  • 10
  • Thanks for this, however I should note that because of my current styling I cannot move the input inside the label as you have suggested. I tried your suggestion and it didn't work. I checked my local storage and it just says 'false'. Any other suggestions? – Endurain Apr 07 '20 at 22:09
  • There is a mistake, that should assign a click event for input blog-1. $('#blog-1').on('click', ... That could trigger the click event for both input and label clicked, but you have to put input element inside the label. – OO7 Apr 07 '20 at 23:06
0

I finally figured this out after spending a bunch of time in the console:

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

    });
});

One issue was making sure each label in my code had a unique data-id attribute, which I got from this fiddle. The other issue, after reformatting my code, was changing "true" to "false" in the if statement since I was removing a class.

Endurain
  • 25
  • 5