本地存儲無法在刷新時顯示輸出

這是練習練習（進入訓練營之前），它是用戶輸入的最喜歡的東西列表。 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

本地存儲無法在刷新時顯示輸出

回答

相關問題