Question

我正在尝试创建一个小型网络应用，允许用户创建他们想要看的电影列表。到目前为止，我已经能够使列表可以排序，并且我已经实现了将div添加到列表中的功能。我也能够使用localStorage来保存第一个div，但不能保存其余的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，其顺序和内容。

Answer 1

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

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

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

<强>更新

我稍微重写了你的准备好的功能，以保存整个电影列表，然后重新加载它。

$(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中进行了一些小改动。

localStorage不会保存用jQuery克隆的div

1 个答案: