localStorage speichert keine mit jQuery geklonten divs

Ich versuche eine kleine Webanwendung zu erstellen, mit der Benutzer eine Liste von Filmen erstellen können, die sie sehen möchten. Bis jetzt war ich in der Lage, die Liste sortierbar zu machen, und ich habe die Fähigkeit implementiert, divs zu der Liste hinzuzufügen. Ich konnte auch localStorage verwenden, um das erste Div zu speichern, aber nicht den Rest. Der Rest sind Klone des ersten.localStorage speichert keine mit jQuery geklonten divs

Mein 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); 
    }); 
});

Mein 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>

Idealerweise möchte ich der Benutzer die Schaltfläche "Speichern" und haben die divs drücken, die ihre Ordnung existieren, und ihre Inhalte gespeichert mit localStorage.

Quelle

2012-04-02 ishmael624

Ich habe Probleme, eine Frage hier zu finden, aber auch, Sie reinitialisieren nichts von 'localStorage.getItem (" divs ")' – JayC

Die Frage ist im Grunde "Was mache ich falsch?" Und wie repariere ich das? Ich habe für wahrscheinlich gute 7 Monate programmiert, also bin ich immer noch ein Greenhorn. – ishmael624

Der Aufruf $(".movie").html() gibt Ihnen nur den HTML-Code für das erste gefundene Element des Klassenfilms. Stattdessen möchten Sie die Methode each verwenden, um über jedes gefundene Element zu iterieren.

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

finden Sie unter http://api.jquery.com/each/ zusätzliche Dokumentation: Dies kann mit der folgenden durchgeführt werden.

aktualisieren

ich Ihre Ready-Funktion ein wenig überarbeitet, die gesamte Filmliste zu speichern und dann neu zu laden.

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

Ich habe zwei Probleme mit Ihrem Code gefunden. Einer, Ihr localStorage.getItem("UserTitles") Anruf blockierte den Anruf zu localStorage.getItem("divs") seit Sie eine else if verwendet haben. Zwei, wenn Sie nach den localStorage.getItem Werten suchen, müssen Sie sie gegen null überprüfen. Ich habe auch eine kleine Änderung vorgenommen, indem ich den gesamten Inhalt der movie-list div in localStorage gespeichert habe.

Quelle

2012-04-02 12:43:42

Also habe ich die 'each' Methode ausprobiert. Und es hat nicht funktioniert. Wie sollte es im Kontext von localStorage implementiert werden? Ich vermisse etwas und ich weiß nicht was. – ishmael624

Die Funktion wurde überarbeitet, um zu zeigen, wie die divs gespeichert und geladen werden. Bitte werfen Sie einen Blick und lassen Sie es mich wissen, wenn Sie irgendwelche Fragen haben. –

Das hat funktioniert! Ich danke dir sehr! Das ist fantastisch. – ishmael624

localStorage speichert keine mit jQuery geklonten divs

Antwort

Verwandte Themen