localStorageはjQueryでクローン化されたdivを保存しません

私は、ユーザーが見たい映画のリストを作成できるようにする小さなWebアプリケーションを作成しようとしています。これまでは、リストをソート可能にすることができました。リストにdivを追加する機能を実装しました。私は、最初のdivを保存するのにlocalStorageを使うこともできましたが、残りは保存できませんでした。残りは最初のクローンです。localStorageはjQueryでクローン化された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を使用して保存されます。

出典

2012-04-02 ishmael624

ここで質問を見つけるのが難しいですが、 'localStorage.getItem（" divs "）' – JayC

から何かを再初期化していません。質問は基本的に "私は間違っていますか？"それをどうやって解決するのか。私はおそらく良い7ヶ月のためにコーディングしていたので、私はまだgreenhornです。 – ishmael624

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

コードに2つの問題があります。あなたがelse ifを使用していたため、localStorage.getItem("UserTitles")コールがlocalStorage.getItem("divs")へのコールをブロックしていました。 2つ目は、localStorage.getItemの値を確認するときに、nullとチェックする必要があります。 movie-list divの内容全体をlocalStorageに保存して、少し変更を加えました。

出典

2012-04-02 12:43:42

私は 'each'メソッドを試しました。そしてそれはうまくいかなかった。どのようにlocalStorageのコンテキストで実装する必要がありますか？私は何かを逃していると私は何がわからない。 – ishmael624

divを保存して読み込む方法を示すために関数を少し修正しました。ご不明な点がございましたら、お気軽にご連絡ください。 –

これはうまくいった！どうもありがとうございます！これは最高です。 – ishmael624

localStorageはjQueryでクローン化されたdivを保存しません

答えて

関連する問題