Pomoc w programowaniu, odpowiedzi na pytania / Jquery / localStorage nie zapisuje plików div sklonowanych za pomocą jQuery - jquery, html, clone, local-storage

localStorage nie zapisuje plików div sklonowanych za pomocą jQuery - jquery, html, clone, local-storage

Próbuję utworzyć małą aplikację internetową, która będziepozwól użytkownikom tworzyć listę filmów, które chcą zobaczyć. Do tej pory udało mi się uzyskać listę do sortowania i zaimplementowałem możliwość dodawania elementów div do listy. Byłem również w stanie użyć localStorage, aby zapisać pierwszy div, ale nie resztę. Pozostałe są klonami pierwszego.

Mój 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);
});
});

Mój 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>

Idealnie, chcę, aby użytkownik nacisnął przycisk "Zapisz" i posiadał elementy div, które istnieją, ich kolejność i ich zawartość zapisaną za pomocą localStorage.

Odpowiedzi:

3 dla odpowiedzi № 1

Powołanie $(".movie").html() poda ci tylko html dla pierwszego znalezionego elementu filmu klasowego. Zamiast tego chcesz użyć each metoda do iteracji po każdym znalezionym elemencie. Można to zrobić za pomocą:

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

Dodatkową dokumentację można znaleźć na stronie http://api.jquery.com/each/.

Aktualizacja

Przebudowałem nieco twoją funkcję, by zapisać całą listę filmów, a następnie załadować ją ponownie.

$(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);
});
});

Znalazłem dwa problemy z twoim kodem. Jeden, twój localStorage.getItem("UserTitles") połączenie blokowało połączenie localStorage.getItem("divs") od kiedy użyłeś else if. Dwa, kiedy sprawdzasz localStorage.getItem wartości, których potrzebujesz, aby je sprawdzić null. Wprowadziłem również niewielką zmianę, przechowując całą zawartość movie-list div w localStorage.