Как сохранить данные после обновления страницы

Question

Вот мой скрипт списка дел.Я хочу добавить новую заметку в мой список ul.li> p> i, i, input:

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, чтобы сохранить элементы в браузере ( ссылка )