javascript - 刷新页面后如何保存数据

Question

这是我的待办事项列表脚本。我想在我的 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 > 吗？

Answer 1

看这一行:

li.appendChild(li);

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

list.appendChild(li);

相反。

编辑:

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