本地存储无法在刷新时显示输出

这是练习练习（进入训练营之前），它是用户输入的最喜欢的东西列表。 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 - I忘了加上CSS，它具有最初隐藏与#show结果{显示：无; }

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

来源

2015-12-14 Padawan

当你说刷新你正在谈论点击刷新浏览器？ –

适合我。复制，粘贴到文档中，工作得很好。 –

看起来像jsFiddle让我们使用localStorage，所以：[Works for me]（http://jsfiddle.net/d54brcrz/）。 –

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

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

来源

2015-12-14 20:39:18 Katana314

那么，我已经能够做到这一点，使用localStorage，因为它存储在浏览器中。当我在OneMonth.com上完成课程时，我们做了同样的事情，我们保存到localStorage中，从中删除，并在发生时刷新.getItem（）。如果你说的是真的，我想我不理解断开连接，因为根据我的理解，localStorage的整个概念是让用户与应用程序交互，并且浏览器保存输入。 – Padawan

如果您安装了python，使用'python -m SimpleHTTPServer'可能会更容易 – jbmartinez

@Padawan如果您的课程要么在公共领域的交互式HTML/JS页面上工作，要么使用其他程序来制作您的localStorage，它会正常工作。但是'localStorage'是特定于域的，浏览器如果从'file：//'打开它并不知道如何关联它。谢天谢地，'localhost'被视为一个域。 jbmartinez的建议也可以发挥作用。 – Katana314

本地存储无法在刷新时显示输出

回答

相关问题