localStorage не будет сохранять div, клонированные с помощью jQuery - PullRequest
Новая
       21

localStorage не будет сохранять div, клонированные с помощью jQuery

2 голосов
/ 02 апреля 2012

Я пытаюсь создать небольшое веб-приложение, которое позволит пользователям создавать список фильмов, которые они хотят посмотреть. До сих пор я был в состоянии сортировать список, и я реализовал возможность добавлять 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>

В идеале, я хочу, чтобы пользователь нажал кнопку «Сохранить» и сохранил существующие div, их порядок и их содержимое, используя localStorage.

1 Ответ

3 голосов
/ 02 апреля 2012

Вызов $(".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 в localStorage.

...