如何使用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

我从您的问题中了解的是，您要使用sessionstorage并使用其值中的值在其中使用Active类中的列表。

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

然后， sessionStorage中的数据以数组形式，因此，首先访问它，最好将JSON.parse(sessionStorage.getItem('category'));存储在变量中，并且像您使用index number一样使用数组（例如使用数组）。

然后在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