刷新页面后如何保存数据

Question

这是我的待办事项列表。我想在我的ul列表中添加一个新注释。 li> p>我，我，输入：

var list = document.querySelector('.list');

document.querySelector('.add-btn').addEventListener('click', function(e){
  e.preventDefault();  
var input = document.querySelector('.add-input');
  if(input.value !== '') {
    var li = document.createElement('li');
        firstP = document.createElement('p');
        secondP = document.createElement('p');
        firstIc = document.createElement('i');
        secondIc = document.createElement('i');
        input1 = document.createElement('input');

        firstIc.className = 'fas fa-edit';
        secondIc.className = 'fas fa-trash-alt';
        input1.className = 'edit-note';
        input1.setAttribute('type', 'text');

        firstP.textContent = input.value;
        secondP.appendChild(firstIc);
        secondP.appendChild(secondIc);
        li.appendChild(firstP);
        li.appendChild(secondP);
        li.appendChild(input1);
        li.appendChild(li);
  }
});

这是HTML：

<div class='container'>
        <h1>Note manager</h1>

        <ul class="list">
            <li>
                <p>First note</p>
                <p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
                <input type="text" name="" class="edit-note">
            </li>
            <li>
                <p>Second note</p>
                <p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
                <input type="text" name="" class="edit-note">
            </li>
        </ul>
        <div class="add-notes">
          <input type="text" name="" class="add-input" placeholder="Add a note..">
          <button type="submit" class="add-btn"> Add</button>
        </div> 
    </div>

我想在刷新页面时保存添加的注释。我怎样才能做到这一点 ？我应该使用AJAX>吗？

Answer 1

看看这一行：

li.appendChild(li);

在这里你添加元素作为自己的孩子（当然这是不可能的），看起来你想做

list.appendChild(li);

代替。

编辑：

回答您的更新问题：您应该将您的项目发布到服务器并将其保存在那里，或者您可以使用localStorage将项目保存在浏览器中（link）