Как хранить несколько div с помощью toggleClass в localStorage?

Question

Я пытаюсь добавить localStorage в функцию toggleClass в jQuery, так что несколько div с .selected css class остаются .выбранными при перезагрузке или закрытии браузера. Кажется, что toggleClass работает, но я не могу заставить localStorage работать. Что я делаю не так?

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> 

Спасибо заранее.

Answer 1

Вам нужно однозначно идентифицировать каждый элемент div, здесь, в примере, я использовал data-* префиксные атрибуты. При загрузке страницы нужно перебирать объекты и целевых элементов, на которых значение ключа установлено значение 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

Примечание: Идентификаторы в HTML должны быть уникальными, таким образом удалены id="box" и используются CSS, основанные на классе