javascript - 如何在sessionStorage中显示基于数组的div

Question

我有一个图像网格，当您单击一个 div(它也有一个 id)时，它会获得“事件”类。然后我将获得“事件”类的 div 的 id 放入 sessionStorage 数组中。

在下一页上，我想读出哪些 id 已存储在我的 sessionStorage 中，并想显示特定的 div。

例如，数组包含 id 'banner'，类 banner 可见。

到目前为止我的代码:

 var sections = $.map($(".active"), function(n, i){
    return n.id;
  });

  sessionStorage.setItem("sections", JSON.stringify(sections));

  var storedSections = JSON.parse(sessionStorage.getItem("sections"));

这是将 id 放入一个数组中。

我可以在我的 .html 文件中用这个读出它们:

<script type="text/javascript">
    document.getElementById("test").innerHTML = sessionStorage.getItem('sections');
</script>

结果是这样的:

["header","banner","footer"]

但是如何根据上面的结果显示某些 div？

Answer 1

map 方法是转换一个字符串数组(id 列表)并将其设置在 session 存储中。如果你想在这些 div 上设置事件类，你可以像这样使用这些数组:

$(document).ready(function(){
   JSON.parse(sessionStorage.getItem('sections')).forEach(function(id){
      $('#'+id).addClass('active');
   })
});