Как сохранить изменения пользователя на сайте после обновления браузера этим пользователем?

Question

Я изучаю Java-скрипт и создаю небольшое приложение, например список дел.Я не хотел бы использовать базу данных в этом проекте, но, возможно, использовать catche пользователя, когда он добавит или удалит список.После обновления браузера тем же пользователем он должен показать предыдущие изменения.

Например: пользователь добавил еще 3 списка и обновил браузер.Он должен увидеть те же задачи, которые он добавил ранее.

Сейчас это не работает, потому что после каждого обновления браузера вид веб-сайта всегда совпадает с примерами списка дел.Я ищу решение, как решить его вместо использования базы данных.

Вот код:

var add = document.getElementById("add-button");
var ul = document.getElementById("tasks");
var emptyField = document.getElementById("empty-field");

add.addEventListener("click", function() {
  var input = document.getElementById("new-task").value;

  if (input === "") {
    emptyField.innerText = "Wpisz coś na listę!";
  } else {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.innerText = input;

    var i = document.createElement("i");
    i.classList.add('fas', 'fa-times');
    i.addEventListener("click", removeLi);
    li.appendChild(i);

    emptyField.innerText = "";
  }
});

//Dodanie zadania za pomocą entera
var enter = document.getElementById("new-task");
enter.addEventListener("keyup", function(event) {
  event.preventDefault();

  var input = document.getElementById("new-task").value;

  if (event.keyCode === 13) {
    if (input === "") {
      emptyField.innerText = "Wpisz coś na listę!";
    } else {
      document.getElementById("new-task").click();

      var li = document.createElement("li");
      ul.appendChild(li);
      li.innerText = input;

      var i = document.createElement("i");
      i.classList.add('fas', 'fa-times');
      i.addEventListener("click", removeLi);
      li.appendChild(i);

      emptyField.innerText = "";
    }
  }
});

//Usuwanie elementu li
var remove = document.getElementsByClassName("fas fa-times");
for (var i = 0; i < remove.length; i++) {
  remove[i].addEventListener('click', removeLi);
}

function removeLi() {
  this.parentElement.remove();
}

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="wrapper">
  <div class="to-do-container">
    <h1>Addd new task</h1>
    <div class="input-data">
      <input id="new-task" type="text">
      <button id="add-button" type="button">Add</button>
    </div>
    <p id="empty-field"></p>
    <ul id="tasks">
      <li class="remove-list">Call to....<i id="fas" class="fas fa-times"></i></li>
      <li class="remove-list">Pick up kids from...<i class="fas fa-times"></i></li>
      <li class="remove-list">Do shopping...<i class="fas fa-times"></i></li>
      <li class="remove-list">Arrange the meeting...<i class="fas fa-times"></i></li>
      <li class="remove-list">Do something...<i class="fas fa-times"></i></li>
      <li class="remove-list">Meet with...<i class="fas fa-times"></i></li>
    </ul>
  </div>
</div>