sessionStorage css свойство div

Question

Я пытаюсь использовать sessionStorage состояние отображения (блок / нет) элемента div filter-panel--content при обновлении моего сайта. У меня есть несколько div с этим классом. Внутри этого div есть несколько флажков, которые обновляют сайт после изменения состояния. Это прекрасно работает, но когда мой сайт обновляется, этот div остается закрытым: «display: none». Но я пытаюсь выполнить сессию для сохранения состояния отображения.

Это вырезание моей боковой панели:

<div class="filter-panel filter--property facet--property" data-filter-type="value-list" data-field-name="f">
<div class="filter-panel--flyout" style="border:none;">
<div id="label-it" class="label-it"><label class="filter-panel--title"><h3 class="rums">LED</h3><div id="klapp" class="klapp"></div></label></div>

<div class="filter-panel--content">
[...]
</div>

<div class="filter-panel filter--property facet--property" data-filter-type="value-list" data-field-name="f">
<div class="filter-panel--flyout" style="border:none;">
<div id="label-it" class="label-it"><label class="filter-panel--title"><h3 class="rums">Housing style</h3><div id="klapp" class="klapp"></div></label></div>

<div class="filter-panel--content">
[...]
</div>

При нажатии на div "label-it", div "filter-panel--content "переключает display:none и display:block, внутри" filter-panel - content "есть несколько флажков, которые обновляют сайт.

И в этот момент я хочу сохранить свойство отображения" filter-panel - content "

Это мое первое решение для получения sessionStorage:

sessionStorage.setItem("filterstate", $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").css("display"));

Это мое первое решение для установки sessionStorage, оно в функции переключения:

$('.label-it').click(function() {
  $(this).find(".filter-panel--title div").toggleClass('klapp klappe');
  $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").toggle(350)

  sessionStorage.setItem("filterstate", $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").css("display"));
});

Мне нужна помощь:)

---

2nd Try: Я пытался реализовать localStorage, к сожалению, это не работает .. нужна помощь ..

SET:

$('.label-it').click(function() {
  $(this).find(".filter-panel--title div").toggleClass('klapp klappe');
  $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").toggle(350)
    var panel =  $(this).closest(".filter-panel--flyout").find(".filter-panel--content div");
  if ( panel.style.display === "block") {
         localStorage.setItem("isOpen", true);
  } else {
         localStorage.setItem("isOpen", false);
  }
});

GET:

$(document).ready(function() {
  var isOpen = localStorage.getItem("isOpen");
  if (isOpen === "true") {
    $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").css('display', 'block');
  } else {
    $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").css('display', 'none');
  }
});

Answer 1

С sessionStorage.setItem("filterstate", $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").css("display")); вы устанавливаете filterstate в значение display, например block или none.

Это само по себе не может делать то, что вы хотите. Вы должны знать, какой элемент вы хотите установить в это сохраненное состояние отображения.

Для этогоВам лучше установить уникальный id="[...]" для каждой панели, которую вы хотите использовать для этого, и установить выбранные идентификаторы в хранилище. Затем вы можете проверить свои идентификаторы в sessionStorage, найти в элементах DOM и переключить их.

Более того, getting - это настройка. Чтобы получить что-то, что вы должны использовать в своем примере sessionStorage.getItem('filterstate');

---

Например:

• set: sessionStorage.setItem("filterstate", $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").attr('id'));

• получить: $('#' + sessionStorage.setItem('filterstate').css('display', 'block');

---

Как вы сказали, вы не можете установить уникальные идентификаторы. Вот пример использования jQuerys .index () :

• set: sessionStorage.setItem("filterstate", $(this).parent().index(this);
• get: $('[ ... Parent ... ]').eq(sessionStorage.setItem('filterstate')).css('display', 'block');

(Не проверено)

---

Ниже приведен проверенный пример для чего-то, где одновременно может быть открыто более одной панели. ( демо )

Обратите внимание на комментарии, чтобы узнать больше:

$('.clickable').click(function() {
  var panel = $(this).closest(".wrapper").find(".childToShow"); // get panel
  panel.toggle(350, 'swing', function() { // toggle panel and execute function !!!after!!! toggle
    var storage = localStorage.getItem('indexes'); // get localStorage
    var index = $(this).parent().index(); // get index of childWrapper (parent of .clickable and .childToShow)

    if ($(panel).css('display') === "block") { // check if panel is showen
      storage = storage ? storage + ';' + index : index; // if panel is showen !!!add!!! its .wrappers index to the localStorage 
      // you should not overwirte the storage with the index, becaus more than one panel could be open at the same time.
    } else { //if panel is closed remove index from localStorage
      var newStorage = ''; // initialize new string for localStorage
      var storageArr = storage.split(';'); // split actual storage string into an array

      storageArr.splice(storageArr.indexOf(index), 1); // remove from storage array

      for (var i = 0; i < storageArr.length; i++) {
        newStorage = i === 0 ? newStorage + storageArr[i] : newStorage + ';' + storageArr[i]; // build new storage string
      }

      storage = newStorage; // set storage variable to the new one
    }
    localStorage.setItem('indexes', storage); // write into storage
  });
});

$(document).ready(function() {
  console.log('Your "indexes" storage looks like: ', localStorage.getItem("active2"))
  var storage = localStorage.getItem("indexes") // get localStorage
  if (storage) { // check if storage is not empty
    storage = localStorage.getItem("indexes").split(';'); // get storage array
    for (var i = 0; i < storage.length; i++) {
      $('.wrapper').eq(storage[i]).find(".childToShow").css('display', 'block'); // show each saved wrappers (its index is in the storage) .childToShow
    }
  }
});