Помощ при програмиране, отговори на въпроси / Jquery / localStorage няма да запази divs клонирани с jQuery - jquery, html, clone, local-storage

localStorage няма да запази divs клонирани с jQuery - jquery, html, clone, local-storage

Опитвам се да създам малка уеб приложение, което щепозволява на потребителите да създават списък с филми, които искат да видят. Досега съм успял да подредя списъка и да реализирам възможността за добавяне на divs в списъка. Също така успях да използвам 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="/images/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="/images/savelist.png" />
</div>
<div id="addmovie">
<img id="add" src="/images/addmovie.png" />
</div>
</body>

В идеалния случай, искам потребителят да натисне бутона „Запази“ и да запази дивите, които съществуват, техния ред и съдържанието им, съхранени с помощта на localStorage.

Отговори:

3 за отговор № 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.