div 的 sessionStorage css 属性

Question

我正在尝试在我的站点刷新时将 div filter-panel--content 的显示状态 (block/none) 存储到 sessionStorage。我有多个 div 和那个 class。 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的方案，在切换函数中：

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

div 的 sessionStorage css 属性

sessionStorage css property of a div

html

javascript

css

session-storage

local-storage