使用 localStorage jQuery 删除单个 li

Question

我可以在使用本地存储时找到有关如何删除单个 li 的解决方案的帮助吗？这是待办事项列表类型的功能。

我可以选择和删除“这个”项目，但是，在页面/浏览器上刷新整个 ul 删除。

我想要做的是只删除选定的项目，即使页面/浏览器确实刷新了。

我相信 list[i] 可能是我的问题，但是我可以通过什么其他方式从 localStorage 中选择 $(this)？

<h1>simple todo</h1>
<form id="form">
  <input type="text" placeholder="Add New...">
  <button>Add Item</button>
</form>
  <ul id="list"></ul>

<script>
//add
$("button").on("click", function() {
  var $item = $("input").val();
  $("ul").append("<li>" + $item + "</li>");

//set
$('#form')[0].reset();
  var list = $('#list').html();
  localStorage.setItem('list', list);
  return false;
});

//show
if(localStorage.getItem('list')) {
  $('#list').html(localStorage.getItem('list'));
}

//remove
$("ul").on("click", "li", function() {
  $(this).css("color", "gray");
  var i = $(this).val();
  localStorage.removeItem(list[i]);
  localStorage.clear();
});
</script>

Answer 1

像这样改变你的删除方法

//remove
$("ul").on("click", "li", function () {
    $(this).css("color", "gray");
    var i = $(this).text();
    var currentList = localStorage.getItem('list');   // get the current list as a string.
    var newList = currentList.replace('<li>' + i + '</li>', '');   // replace the clicked item with a blank string. But if you have multiple tasks with the same name this will cause deleting the first occurrence of it.
    localStorage.setItem('list', newList);  // update the localStorage with the new list
});