无法使localStorage在刷新时显示输出 [英] Can't get localStorage to display output on refresh

问题描述

这是一个练习练习(在进入训练营之前)，该练习列出了用户输入的最喜欢的东西. 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.

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-我忘了添加CSS，最初使用#show {display:none;来隐藏结果. }

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

推荐答案

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

这可以解释它.您需要尝试从小型"Web服务器"查看项目-然后浏览器可以连接到"http://localhost"或"http://localhost:1234"(端口号)以查看项目.较容易设置的一种是"XAMPP".您可能会四处寻找其他人，其中许多人会比您需要的更为复杂.适当的Google搜索将是免费的基本网络服务器".

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".

这篇关于无法使localStorage在刷新时显示输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！