无法让localStorage在刷新时显示输出

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.

这是练习练习（在进入训练营之前），是用户输入的最喜欢的事物列表。 LocalStorage可以正常保存和删除，直到刷新点，整个列表消失。但是在另一个条目之后，整个列表然后加载;它只是在刷新后不会闲逛。对于我的生活，我无法弄清楚为什么。

HTML

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

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; }

CSS - 我忘了添加CSS，其结果最初隐藏了#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;
}

1 个解决方案

#1

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

文件：///用户/学徒/ Dropbox的/文件夹/ folder_2 / JavaScript的/ 23_JQ_code_review /指数的.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".

这可以解释它。您需要尝试从小型“Web服务器”查看项目 - 然后您的浏览器可以连接到“http：// localhost”或“http：// localhost：1234”（端口号）来查看您的项目。其中一个更容易设置的是“XAMPP”。你可以四处寻找其他人，其中许多会比你需要的更复杂。适当的谷歌搜索将是“免费的基本网络服务器”。