如何使用sessionStorage恢复以前选择的列表项？

Question

我正在开展一个项目，我想在其中存储选定的列表项（这些项目获得active类），并在下一页加载时将此类添加到所选项目中。可以从选择中有4个单独的列表（具有相同的类）。

要完成此任务，我使用sessionStorage。问题是如何存储选定的项目，在下一页上加载正确的项目得到active类？

我尝试将项目的文本节点保存到sessionStorage，然后使用$.each()将其值与页面上的列表项的值进行比较。虽然没有成功。我已经尝试保存所选项目的jQuery对象，但作为回报我有错误的数据（只是最后添加的项目在事实jQuery对象中）。

这是我在CodePen上找到的代码示例： https://codepen.io/kwiat_1990/pen/GWjjBd?editors=0100

$(function() {
  // add/remove 'check icon' on the selected category
  $('.category__list').on('click', 'li', function(e) {
    var otherListItem = $('#author li:not(:first-child)');
    var firstListItem = $('#author li:first-child');
    var $this = $(this).not('.dropdown-header');

    if (firstListItem.hasClass('active')) {
      // mark/unmark clicked categories as chosen
      $this.hasClass('active') ? $this.removeClass('active') : $this.addClass('active');
      // when the first list item is eralier checked, any other selection uncheck the one on the first item
      if ($this.is(otherListItem)) {
        firstListItem.removeClass('active');
      }
    } else {
      $this.hasClass('active') ? $this.removeClass('active') : $this.addClass('active');
      // when the first item ('any' author) is checked, other selection on the list are unchecked
      if ($this.is(firstListItem)) {
        otherListItem.removeClass('active');
      }
    }

    // change dropdown text based on selection
    $('.dropdown button span:first-child').text(($(otherListItem).hasClass('active')) ? 'One or more selected' : 'Any');

    e.preventDefault();
    e.stopPropagation();

    var categories = JSON.parse(sessionStorage.getItem('category')) || [];
    var checkedItem = $this.hasClass('active') ? $this.text() : '';
    categories.push(checkedItem);

    if (sessionStorage) {
      sessionStorage.setItem('category', JSON.stringify(categories));
    }
  });

  var lastCheckedItems = JSON.parse(sessionStorage.getItem('category'));
  var checkedItem;

});

body {
  background-color: #ececec;
}

.category {
  width: 400px;
  margin: 0 auto;
}
.category__title {
  padding: 0 20px;
  margin: 20px 0;
}
.category__list {
  background-color: #fafafa;
  list-style: none;
  padding: 0 20px;
}
.category__list li {
  position: relative;
  padding: 10px 0;
  cursor: pointer;
}
.category__list li:not(.dropdown-header):hover {
  text-decoration: underline;
}
.category__list li a {
  color: inherit;
}
.category__list li + li {
  border-top: 1px solid #4c4c4c;
}
.category__list li.active:after {
  content: "X";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}
.category__title, .category__list {
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
}
.category .dropdown button {
  display: block;
  width: 100%;
  background-color: #fafafa;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  font-size: .9rem;
  text-align: left;
  text-transform: uppercase;
}
.category .dropdown-menu {
  position: relative;
  float: none;
  box-shadow: none;
  border-radius: 0;
  border: none;
  width: 100%;
}
.category .dropdown-menu li a {
  display: block;
  padding: 0;
  font-weight: 600;
}
.category .dropdown-menu .active a,
.category .dropdown-menu .active a:hover,
.category .dropdown-menu .active a:focus {
  color: inherit;
  text-decoration: underline;
}
.category .show .dropdown-toggle:after {
  border-top: none;
  border-bottom: .3em solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="category">
  <h3 class="category__title">Teams</h3>
  <ul class="category__list" id="category-team">
    <li><a href="#">Team Witten <span class="category__count">(1)</span></a></li>
    <li><a href="#">Team Helsinki <span class="category__count"></span></a></li>
    <li><a href="#">Team Louvain-La-Neuve</a> <span class="category__count">(2)</span></li>
  </ul>
  <h3 class="category__title">Subject</h3>
  <ul class="category__list" id="category-subject">
    <li><a href="#">Economics <span class="category__count"></span></a></li>
    <li><a href="#">Neuroscience <span class="category__count"></span></a></li>
    <li><a href="#">Psychology <span class="category__count"></span></a></li>
  </ul>
  <h3 class="category__title" id="category-year">Years</h3>
  <ul class="category__list">
    <li><a href="#">2016 <span class="category__count"></span></a></li>
    <li><a href="#">2017 <span class="category__count"></span></a></li>
    <li><a href="#">2018 <span class="category__count"></span></a></li>
  </ul>
  <!-- dropdown -->
  <h3 class="category__title" id="category-author">Author</h3>
  <div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="dropdown"><span>Any</span>
										 </button>
    <ul class="dropdown-menu category__list" id="author">
      <li><a href="#">Any</a></li>
      <li class="dropdown-header">Team Witten</li>
      <li><a href="#">Author 1</a></li>
      <li><a href="#">Author 2</a></li>
      <li><a href="#">Author 3</a></li>
      <li class="dropdown-header">Team Helsinki</li>
      <li><a href="#">Author 1</a></li>
      <li><a href="#">Author 2</a></li>
      <li><a href="#">Author 3</a></li>
      <li class="dropdown-header">Team Louvain-La-Neuve</li>
      <li><a href="#">Author 1</a></li>
      <li><a href="#">Author 2</a></li>
      <li><a href="#">Author 3</a></li>
    </ul>
  </div>
  <!-- end dropdown -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

我从您的问题中了解到的是CodePen是您希望使用sessionStorage并使用其中的值使下一页中的列表中包含活动类。

首先，我不知道你在sessionStorage中存储了什么，但如果你存储这些元素的id会更好，那么在其他页面上将它更容易激活。

然后，sessionStorage中的数据是数组形式所以，要首先访问它，最好将JSON.parse(sessionStorage.getItem('category'));存储在一个变量中，然后像使用带索引号的数组一样访问它。

然后在js文件中，您将要包含在您希望此功能的页面中尝试此操作或更简单的循环。

for(int i=0;i<{variable name of json}.length;i++){
  $('#{variable name of json}[i]').addClass( "active" );
}

了解更多信息： https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage