動的に追加されたDOM要素の滞在（リフレッシュ後）の方法

Question

簡単なToDoリストを作成すると、ここでは動的にタスクを追加しますが、ページを更新すると動的に追加されたDOMが消えてしまいます。出来ますか？

Htmlの

<input class="form-control" placeholder="Enter text here" id="todoTxt" type="text" name="todo"> 
    <button id="todoSub" class="btn btn-success form-control">Submit</button> 
    <div id="todoList" class="list-group"> 
     <button type="button" class="list-group-item done">task one<span class="badge">x</span></button> 
     <button type="button" class="list-group-item">task two<span class="badge">x</span></button> 
     <button type="button" class="list-group-item">task three<span class="badge">x</span></button> 
    </div> 

はJavaScript

function addlist(content){ 
     var newListItem = $('<button></button>'); 
     $(newListItem).addClass('list-group-  item').text(content).append('<span class="badge">x</span>'); 
     $('#todoList').append(newListItem); 
    } 
     $('#todoSub').click(function(e){ 
     console.log(e); 
     var content = $('#todoTxt').val(); 
     addlist(content); 
    }); 
     //And Here I am unable to remove dynamically added DOM 
     $('#todoList button span').click(function(e){ 
     e.stopPropagation(); 
     $(this).parent().remove(); 
    }); 

Answer 1

はい、それは可能です、あなたは、sessionfile、database、local storageのような永続ストレージに新たに作成されたHTMLにいくつかの場所を保存する必要があります。

タスクの新しいhtmlが動的に生成されるたびに、上記のストレージのいずれかにそれを格納する必要があります。また、ページがリフレッシュまたは最初にレンダリングされたときに、そのストレージをチェックして、最近作成されたhtmlをレンダリングする必要があります。ユーザーがそのhtmlを削除すると、そのストレージからhtmlを削除します。

Answer 2

はい。ウィジェットではない可能性がありますが、jqueryまたはjsです。 データベースを使用して、DOMに追加された要素を保存する必要があります。