CODEWITHSUNDEEP
javascriptjquerylocal-storagesession-storage
Sergey
Sergey

Reputation: 31

Save active items in list into sessionStorage

I have a list with active 6 items. If click on "More cases" I get the next 3 active items and I try to save active states of all next items to sessionStorage. For example I added sessionStorage into the click but it saved object like string and I don't figure out how to do it better with list

My example:

var total = 6;
var cases = $(".cases__item").length;


$('.cases__item:lt(' + total +')').addClass("active").show();
$('#morecases').click(function () {
    total += 3;
    if (total <= cases) {
      $('.cases__item:lt(' + total + ')').addClass('active').show()
    } else {
      $('.cases__item:lt(' + total + ')').addClass("active").show();
      $('#morecases').hide();
    }
});
.cases__item {display: none}

.cases__item.active {display: block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cases">
  <a class="cases__item active" href="/">Item 1</a>
  <a class="cases__item active" href="/">Item 2</a>
  <a class="cases__item active" href="/">Item 3</a>
  <a class="cases__item active" href="/">Item 4</a>
  <a class="cases__item active" href="/">Item 5</a>
  <a class="cases__item active" href="/">Item 6</a>
  <a class="cases__item" href="/">Item 7</a>
  <a class="cases__item" href="/">Item 8</a>
  <a class="cases__item" href="/">Item 9</a>
  <a class="cases__item" href="/">Item 10</a>
  <a class="cases__item" href="/">Item 11</a>
  <a class="cases__item" href="/">Item 12</a>
</div>
<a href="#" id="morecases">more Cases</a>

Upvotes: 2

Views: 701

Answers (1)

Ankit Parmar
Ankit Parmar

Reputation: 788

you need to add your object as a string in session storage.

sessionStorage.setItem('user', JSON.stringify(user));

Here the user is your array or object.

Upvotes: 2

Related Questions