javascript - div 的 sessionStorage css 属性

Question

当我的网站刷新时，我正在尝试通过 sessionStorage 显示 div filter-panel--content 的显示状态( block /无)。我在那个类(class)有多个 div。在该 div 中有一些复选框，它们在更改状态后刷新站点。 这非常有效，但是当我的网站刷新时，这个 div 保持关闭状态 'display:none'。但是我尝试在sessionStorage中显示状态。

这是我侧边栏的截图:

<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的方案，在toggle函数中:

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

我需要一些帮助:)

---

第二次尝试: 我试图实现 localStorage 不幸的是它不起作用..我真的需要一些帮助..

设置:

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

获取:

$(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。

这本身不能做你想做的事。你必须知道你想将哪个元素设置为这个保存的显示状态。

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.

此外，您的getting 是一种设置。要获得您必须在示例中使用的内容 sessionStorage.getItem('filterstate');

---

例如:

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

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

---

如您所说，您不能设置唯一 ID。这是一个使用 jQuerys .index() 的例子:

• 设置:sessionStorage.setItem("filterstate", $(this).parent().index(this);
• 获取:$('[ ... Parent ... ]').eq(sessionStorage.setItem('filterstate')).css('display', 'block');

(未测试)

---

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

注意评论以了解更多信息:

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