Как вытянуть значения из локалстора

Не догоняю, как удалить выбранное значение из локалстора, а так же как вытянуть значения из локалстора. Есть список, по нажатию на кнопку значения инпута добавляется в стилизованный li, далее значение li сохраняется в массив, далее он форматируется в json и добавляется в локалстор. По нажатию на появившийся li он должен удаляеться из разметки, а так же с локалстора. Но вот как сделать так, чтобы при нажатии на определенный элемент именно его значение удалялось с локалстора, а так же при добавлении нового li и обновлении страницы он не слетал - не понимаю.

  var hobbies = document.getElementById("hobbies");
  var addHobbies = document.getElementById("btn-add-hobbies");
  var ul = document.querySelector(".profile__ul");
  var listValues = [];
  localStorage.getItem("myHobbies", listValues);
  addHobbies.addEventListener("click", () => {
    var input = hobbies.value;
    if (input) {
      ul.style.display = "block";
      var newLi = document.createElement('li');
      newLi.textContent = input;
      ul.appendChild(newLi);
      listValues.push(newLi.textContent); //добавляю значения в массив, чтобы потом кинуть в локалстор
      hobbies.value = "";
      localStorage.setItem("myHobbies", JSON.stringify(listValues));
    }
  });
    ul.addEventListener('click', function(event) {
      var target = event.target;
      if (target.tagName == "LI") {
        target.remove();
        listValues.pop(target);
        localStorage.removeItem("myHobbies",target);
      }
    });