Can't get localStorage to display output on re

Question

This is a practice exercise (prior to entry into bootcamp) that is a list of favorite things entered in by the user. LocalStorage works in saving and deleting properly, up to the point of refresh, where the entire list disappears. But after another entry, the entire list then loads; it just doesn't hang around after refresh. For the life of me, I can't figure out why.

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-9 stuff">
      <h3><i>Enter in a favorite thing, then hit the button</i></h3>

<!-- form -->
      <form id="the-form">
        <input id="list-input" type="text" placeholder="sexy time" size="40">
        <button class="btn btn-warning" type="submit">Submit</button>
        <hr>
      </form>

    </div> <!-- /col-sm-12 -->
  </div> <!-- /row -->

<!-- results -->
  <div class="row">
    <div id="show" class="col-sm-7">
      <h3 class="fav-things">My most favoritest things</h3>

      <ul id="list-items">
      </ul>

    </div>
  </div> <!-- /row -->
</div> <!-- /container -->

jQuery

$(document).ready(function() {
    $("#list-items").html(localStorage.getItem("listItems")); // refresh not working

    $("#the-form").submit(function(event) {
        event.preventDefault();
        var item = $("#list-input").val();

        if (item) {
            $("#list-items").append("<li>" + item + "<a href='#' class='delete'>x</a><hr></li>");
            $("#show").show();
        }
        localStorage.setItem("listItems", $("#list-items").html()); // saves input to localStorage
        $("#list-input").val("");  // removes value from input
    });

  // Remove List item
    $(document).on("click", ".delete", function() { // .on() to work with dynamic element <li>
        $(this).parent().slideUp(300, function() { // grabbing the parent of the x that was clicked on
            $(this).remove();  // removing the parent of the clicked on x
            localStorage.setItem("listItems", $("#list-items").html());  // saves input to localStorage
        });
    });
});

CSS - I forgot to add the CSS, which has the results initially hidden with #show { display: none; }

body {
  padding-top: 70px;
}

.stuff {
  background-color: #ffe5ff;
  border: 1px solid #ffe5ff;
  border-radius: 8px;
  margin-bottom: 10px;
}

#list-input {
  padding-left: 5px;
}

#show {
  display: none;
  background-color: #e5ffff;
  border: 1px solid #99ddff;
  border-radius: 8px;
}

.delete {
  float: right;
  padding: 10px;
  text-decoration: none;
  color: black;
}

hr {
  width: 80%;
}

.fav-things {
  padding-bottom: 5px;
  border-bottom: 2px solid #d9d9d9;
}

Answer 1

file:///Users/Padawan/Dropbox/folder/folder_2/JavaScript/23_JQ_code_review/index‌​.html?#

That would explain it. You need to try viewing your project from a small "web server" - then your browser can connect to "http://localhost" or "http://localhost:1234" (port number) to view your project. One of the easier ones to set up is "XAMPP". You could look around for others, many of which would be more complicated than you need. An appropriate google search would be "free basic web server".