我正在尝试创建一个小型网络应用程序，允许用户创建他们想看的电影列表。到目前为止，我已经能够使列表可排序，并且我已经实现了将 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、它们的顺序及其内容。
最佳答案
调用 $(".movie").html() 只会为您提供在类 movie 中找到的第一个元素的 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 中。
关于jquery - localStorage 不会保存使用 jQuery 克隆的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9970829/