Question

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

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

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?#

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

无法通过localStorage在刷新时显示输出

1 个答案: