Javascript 刷新页面后如何保存数据

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

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>？

请看这一行：

li.appendChild(li);

在这里，您添加元素作为其自身的子元素，当然这是不可能的，看起来就像您想要做的一样

list.appendChild(li);

相反

编辑：

---

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

是的，我不知道您在这里想要实现什么。你是说在运行后添加它？