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

为每个折叠类添加一个数据索引属性，并将其与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 2

如果要分别跟踪每个项目，则必须在每个项目上放置唯一的ID，并在JSON.stringify中存储JSON对象（通过使用JSON.parse和localStorage），例如

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

Answer 3

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

在LocalStorage上显示/隐藏无法正常工作，全部或全部无效

3 个答案: