localStorage 不会保存使用 jQuery 克隆的 div答案

【问题标题】：localStorage won't save divs cloned with jQuerylocalStorage 不会保存使用 jQuery 克隆的 div
【发布时间】：2012-04-15 18:47:16
【问题描述】：

我正在尝试创建一个小型网络应用程序，允许用户创建他们想看的电影列表。到目前为止，我已经能够使列表可排序，并且我已经实现了将 div 添加到列表中的功能。我还能够使用 localStorage 来保存第一个 div，但不能保存其余部分。其余的是第一个的克隆。

我的 JS：

$(document).ready(function(){
    $("#movie-list").sortable({
        handle : '.handle',
        update : function(){
        var order = $("movie-list").sortable('serialize');
        }
    });
    $("#add").click(function(){
        $(".movie").last().clone(true).insertAfter($(".movie").last());
    });
    $("#save").click(function(){
        var titles = $(".title").html();
        var divs = $(".movie").html();
        localStorage.setItem("UserTitles", titles);
        localStorage.setItem("divs", divs);
        alert("Your list has been saved!");
     });
     $(function(){
        if (localStorage.getItem("UserTitles")){
            var titles = localStorage.getItem("UserTitles")
        }
        else if (localStorage.getItem("divs")){
            var divs = localStorage.getItem("divs")
        }
        else{
            var titles = "New Movie";
            var divs = $(".movie").html();
        }
        $(".title").html(titles);
     });
});

我的 HTML：

<body>
<div id="header">MY MOVIE LIST</div>
    <div id="movie-list">
        <div class="movie">
            <img src="http://aux4.iconpedia.net/uploads/74429410244335194.png" width="16" height="16" class="handle" alt="Move" />
            <label class="title" contenteditable="true"></label>
        </div>
    </div>
    <div id="savelist">
        <img id="save" src="savelist.png" />
    </div>
    <div id="addmovie">
        <img id="add" src="addmovie.png" />
    </div>
</body>

理想情况下，我希望用户按下“保存”按钮并使用 localStorage 保存存在的 div、它们的顺序和内容。

【问题讨论】：

我在这里找不到问题，而且，你没有从localStorage.getItem("divs")重新初始化任何东西
问题基本上是“我做错了什么？”我该如何解决。我已经编写了大约 7 个月的代码，所以我还是个新手。

标签： jquery html clone local-storage

【解决方案1】：

调用$(".movie").html() 只会给你找到类电影的第一个元素的html。相反，您想使用each 方法迭代找到的每个元素。这可以通过以下方式完成：

var allHTML = "";
$(".movie").each(function(i) {
  allHTML = allHTML + this.innerHTML;
});

您可以在http://api.jquery.com/each/ 找到其他文档。

更新

我对你的 ready 函数做了一些修改，以保存整个电影列表，然后重新加载它。

$(document).ready(function(){

    $("#add").click(function(){
        $(".movie").last().clone(true).insertAfter($(".movie").last());
    });
    $("#save").click(function(){
        var titles = $(".title").html();
        var divs = $("#movie-list").html();
        localStorage.setItem("UserTitles", titles);
        localStorage.setItem("divs", divs);
        alert("Your list has been saved!");
     });
     $(function(){
        var titles = "New Movie";
        var divs = $("#movie-list").html();
        if (localStorage.getItem("UserTitles") != null && localStorage.getItem("divs") != null)
        {
            titles = localStorage.getItem("UserTitles")
            divs = localStorage.getItem("divs")
        }
        $(".title").html(titles);
        $("#movie-list").html(divs);
     });
});

我发现您的代码有两个问题。一，您的localStorage.getItem("UserTitles") 呼叫阻止了对localStorage.getItem("divs") 的呼叫，因为您使用了else if。第二，当您检查localStorage.getItem 值时，您需要对照null 检查它们。我还做了一个小改动，将movie-list div 的全部内容存储在localStorage 中。

【讨论】：

于是我尝试了each的方法。它没有用。在localStorage的上下文中应该如何实现呢？我错过了一些东西，我不知道是什么。
对函数进行了一些修改，以显示如何保存和加载 div。如果您有任何问题，请查看并告诉我。
太棒了。如果您没有其他需要，请接受答案。