title: How to store a class in local storage using jquery?
body: <p>I have multiple check boxes. on click their background colour changes and their value is saved to the local storage. However when refreshed the background colour is not saved. How can you save the background colour change to local storage?
  here is example code i'm using <a href="https://jsfiddle.net/2m04prmz/2/" rel="nofollow">https://jsfiddle.net/2m04prmz/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="checkbox" class="faChkRnd" id="like9" &gt;&lt;label&gt;&lt;/label&gt; 
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.pincard-checked,  pin p {
      background-color: #2c3e50; color: #ffffff;transition: all 1s ease-out;border-top:2px solid #fff; 
  }
  </code></pre>
  
  <p>JS: to control the highlighting  </p>
  
  <pre><code>$(document).ready(function(){
      $("#like").click(function () {
          $("#pin").toggleClass("pincard-checked");
      });
  });
  </code></pre>
  
  <p>JS: Saving checkbox value to local storage</p>
  
  <pre><code>$('.faChkRnd').on('click', function() {
      var fav, favs = [];
      $('.faChkRnd').each(function() { // run through each of the checkboxes
          fav = {
              id: $(this).attr('id'),
              value: $(this).prop('checked')
          };
          favs.push(fav);
      });
      localStorage.setItem("favorites", JSON.stringify(favs));
  });
  $(document).ready(function() {
      var favorites = JSON.parse(localStorage.getItem('favorites'));
      if (!favorites.length) {
          return
      };
      console.debug(favorites);
  
      for (var i = 0; i &lt; favorites.length; i++) {
          console.debug(favorites[i].value == 'on');
          $('#' + favorites[i].id).prop('checked', favorites[i].value);
      }
  });
  </code></pre>