How do I store multiple divs with toggleClass in localStorage?

Question

I'm trying to add localStorage to the toggleClass function in jQuery, so that multiple divs with the .selected css class stay .selected when reloading or closing the browser. The toggleClass seems to work, but I can't seem to get the localStorage to work. What am I doing wrong?

Here's the fiddle.

JS:

$(function(){
  $('.mix').click(function() {
    window.localStorage.setItem('test',$(this).toggleClass('selected'));
  });
  if(localStorage.getItem('test')){
    $(this).toggleClass('selected');
  }
});

HTML:

<div id="box" class="p001 mix">Div 1</div>
<div id="box" class="p002 mix">Div 2</div>

Thanks in advance.

Answer 1

You need to uniquely identify each div element, here in example I have used data-* prefixed custom attributes. On page load you need to iterate the objects and target the elements on which the value of key is set to true

HTML

<div data-id="1" class="p001 mix">Div 1</div>
<div data-id="2" class="p002 mix">Div 2</div>

Script

$(function() {
    $('.mix').click(function() {
        $(this).toggleClass('selected');
        var lsid = 'test' + this.dataset.id;
        window.localStorage.setItem(lsid, $(this).hasClass('selected'));
    });

    $('.mix').each(function() {
        var lsid = 'test' + this.dataset.id;
        if (localStorage.getItem(lsid) && localStorage.getItem(lsid) == "true") {
            $(this).addClass('selected');
        }
    })
});

Fiddle

Note: Identifiers in HTML must be unique, thus removed id="box" and used CSS based on class