如何在本地存儲中存儲帶有toggleClass的多個div？

Question

我正在嘗試將localStorage添加到jQuery中的toggleClass函數中，以便在重新加載或關閉瀏覽器時，具有.selected css類的多個div保持.selected。 toggleClass似乎可以正常工作，但是我似乎無法使localStorage正常工作。 我究竟做錯了什么？

這是小提琴 。

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>

腳本

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

小提琴

注意： HTML中的標識符必須是唯一的 ，因此刪除了id="box"並根據類使用了CSS