javascript - 如何使动态添加的 DOM 元素保持不变(刷新后)

Question

制作一个简单的待办事项列表，在这里我动态添加任务，但是当我刷新页面时，动态添加的 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

是的，这是可能的，您必须将新创建的html保存在持久存储中的某个位置，例如文件，数据库，本地存储， session 。

这意味着，每次动态生成任务的新 html 时，您都必须将其存储在上面列出的存储中的任何一个中。当刷新后或第一次渲染页面时，您必须检查该存储并渲染最近创建的 html。当用户删除该 html 时，然后将其从该存储中删除。