title: Displaying local storage in page: Jquery
body: <p>I am able to add to local storage and remove items but it wont display the added item in my html. Once something is added to local storage it should display on a favorites page, then when removed it should be removed from the favorites page. It is the viewing favorites section of the code that doesn't seem to be working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Add Favorites
  $('.favoritesbtn').click(function() {
    var storedbar = JSON.parse(localStorage.getItem('storedBar'));
    var favArray = [];
    favArray.push(storedbar.id, storedbar.barname, storedbar.address, storedbar.description, storedbar.image);
    localStorage.setItem('favorites', JSON.stringify(favArray));
    console.log(localStorage.getItem('favorites'));
  
  });
  
  //viewing favorites
  
  var favBar = JSON.parse(localStorage.getItem('favorites'));
  console.log(favBar);
  
  function displayPageContent(object) {
    if (object) {
      $('#bar-info h2').html(object.barname);
      $('#bar-info h5').html(object.address);
      $('#bar-info p').html(object.description);
      $('#bar-info img').html(object.image);
    }
  }
  displayPageContent(favBar);
  
  //Removing favorites
  $('.removebtn').click(function() {
    console.log('delete');
    localStorage.removeItem('favorites');
    console.log(localStorage.getItem('favorites'));
  });</code></pre>
  </div>
  </div>
  </p>