HTMLストレージを使用したHTMLリストの追加、ソート、保存、取得

Question

jQuery .sortableと.appendを使用して、HTMLリストを許可しています。私はローカルのHTMLストレージを利用してリストを保存しようとしています。リストは保存されていません。

HTML

<ul id="sortable"> 
</ul> 

<form id="append" action=""> 
    <input type="text" id="appendvalue"> 
    <input type="submit" value="Append"> 
</form> 

jQueryの

$(function() { 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 
}); 

$("#append").submit(function(event) { 
    $("#sortable").append("<li id=\"storevalue\" class=\"ui-state\">" + 
    $('#appendvalue').val() + "</li>"); 

    event.preventDefault(); 
}); 

// Store 
localStorage.store_data = ("key", 
document.getElementById("storevalue").HTML); 

// Retrieve 
document.getElementById("storevalue").HTML = localStorage.store_data; 

JSFiddle

Answer 1

あなたながらイベントを提出するだけ#append年代にあなたのDOMに#storevalue項目を追加しているためですそれをいつでも保存するJavaScriptが読み込まれます。

この時点では#storevalueアイテムはまだ存在しません。また

、あなたはあなたのデータはリフレッシュを通じて持続したい場合は、「リスナー

// Store 
$("#append").submit(function(event) { 
    event.preventDefault(); 
    $("#sortable").append("<li id=\"storevalue\" class=\"ui-state\">" + 
    $('#appendvalue').val() + "</li>"); 

    sessionStorage.setItem("yourkey", $('#appendvalue').val()); 

}); 

を提出し、を入れ#append年代の内側にそのコンテンツを格納するためのコードを入れて代わりlocalStorage

のsessionStorageを使用ボタンのクリックリスナーでコードを取得する

ここにありますthe updated fiddle