Показать / скрыть в LocalStorage не работает правильно, все или ничего

Question

У меня есть скрипт, который сохраняет действие на локальном хранилище.Моя проблема в том, что когда я обновляю страницу, на ней отображаются все элементы или их нет.Не только тот, который был нажат.(все элементы с классом 'show-block' получают style = "display: block".) Так что, вероятно, требуется хранилище для каждого элемента ..

Моя скрипка: https://jsfiddle.net/wxhqr3t6/18/

$(document).ready(function () {
  $(".collapse").click(function () {
    $(this).siblings().toggle();
    localStorage.setItem("display", $(this).siblings().is(":visible"));
  });
  var block = localStorage.getItem("display");
  if (block == "true") {
    $(".show-block").show()
  }
});

Answer 1

$(document).ready(function () {
  if (localStorage.getItem('display') == null) {
    localStorage.setItem("display", JSON.stringify([]));
  }
    const elements = $('.filter-transmission');
  elements.find(".collapse").click(function () {
    $(this).siblings().toggle();
    const index = $(this).parent().index();
    let items = JSON.parse(localStorage.getItem("display"));
    if (items.includes(index)) {
        items.splice(items.indexOf(index), 1);
    } else {
        items.push(index);
    }
    localStorage.setItem("display", JSON.stringify(items));
  });
  var openedItems = JSON.parse(localStorage.getItem("display"));
  elements.each((el) => {
    if (openedItems.includes(el)) {
        console.log('el', el);
        $(elements).eq(el).find('.show-block').show();
    }
  });
});

Answer 2

Добавьте свойство индекса данных для каждого класса свертывания и сохраните вместе с ним localStorage. Следуйте моему примеру:
С HTML:

After refresh its not possible to show just 1 or 2 items. Its show all or hide all.<br>

<article class="filter-transmission">
  <h2 class="filter-title collapse" data-index="1">Show content 1</h2>

  <div class="show-block">
    content 1 here!
  </div>
</article>

<article class="filter-transmission">
  <h2 class="filter-title collapse" data-index="2">Show content 2</h2>

  <div class="show-block">
    content 2 here!
  </div>
</article>

<article class="filter-transmission">
  <h2 class="filter-title collapse" data-index="3">Show content 3</h2>

  <div class="show-block">
    content 3 here!
  </div>
</article>

<input type="button" value="Refresh Page" onClick="window.location.reload()">

С JavaScript:

$(document).ready(function () {
    $( ".collapse" ).each(function() {
    var block = localStorage.getItem("display"+$(this).data("index"));
    if (block == "true") {
      $(this).closest("article").find(".show-block").show();
    }
  });
  $(".collapse").click(function () {
    $(this).siblings().toggle();
    localStorage.setItem("display"+$(this).data("index"), $(this).siblings().is(":visible"));
  });
  var block = localStorage.getItem("display"+$(this).data("index"));
  if (block == "true") {
    $(".show-block").show()
  }
});

Answer 3

Если вы хотите отслеживать каждый элемент в отдельности, тогда вам нужно присвоить уникальные идентификаторы каждому из них и сохранить объект JSON (используя JSON.stringify и JSON.parse) в localStorage, например,

display = 
{
  id_1: false,
  id_2: true,
  id_3: false
}