sessionStorage css property of a div

Question

I am trying to sessionStorage a display state (block/none) of a div filter-panel--content when my site refreshes. I have multiple div's with that class. Inside that div are some checkboxes that refreshes the site after they change state. That works perfectly, but when my site refreshes this div stays closed 'display:none'. But I try to sessionStorage the display state.

This is a cutting of my sidebar:

<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>

When the div "label-it" is clicked, the div "filter-panel--content" toggles display:none and display:block, inside "filter-panel--content" are some checkboxes that refreshes the site.

And at this point I want to store the display property of "filter-panel--content"

This is my first solution of getting the sessionStorage:

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

This is my first solution of setting the sessionStorage, it's in the toggle function:

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

I need some help :)

---

2nd Try: I tried to implement localStorage unfortunately it doesn't work.. I rly need some help..

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

With sessionStorage.setItem("filterstate", $(this).closest(".filter-panel--flyout").find(".filter-panel--content div").css("display")); you're setting filterstate to the display-value like block or none.

This at its own couldnt do what you want to. You have to know wich element you want to set to this saved display state.

For this you should better set an unique id="[...]" to each panel you would like to use for this and setting the selected ids into the storage. Then you could check your sessionStorage for the ids, search your DOM for its elements and toggle them.

Furthermore your getting is a setting. To get something you have to use in your example sessionStorage.getItem('filterstate');

---

For example:

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

• get: $('#' + sessionStorage.setItem('filterstate').css('display', 'block');

---

As you said, you cant set unique ids. Here is an example using jQuerys .index():

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

(Not tested)

---

The following is a tested example for somethinge where more than one panel could be open at the same time. (demo)

Note the comments to learn more:

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