LocalStorage

by Rob Rothe

HTML

<div class="container">

  <span set-collection="moderne">Moderne</span>
  <span set-collection="classic">Classic</span>
  <hr>
  <div class="collections" id="moderne-collection">
    <h2>Moderne Collection</h2>
  </div>

  <div class="collections" id="classic-collection">
    <h2>Classic Collection</h2>
  </div>

</div>

CSS

.collections {
  display: none;
}

[set-collection] {
  cursor: pointer;
  padding: 20px;
  border: 1px solid red;
  display: inline-block;
}

JavaScript

$(document).ready(function() {

  // assign the collection var
  var collection = localStorage.getItem('collection');

  setCollection();

  // new name form
  $('[set-collection]').on('click', function() {
    // pull collection type from element
    collection = $(this).attr('set-collection');

    // set new collection in local storage
    localStorage.setItem('collection', collection);

    setCollection(collection);
  });

  function setCollection() {
    // hide all collections
    $('.collections').hide();

    // show the selected collection
    $('#' + collection + '-collection').fadeIn();
  }

});