本地存储 - 刷新时出现错误的列表项答案

【问题标题】：Local storage - wrong list items appear on refresh本地存储 - 刷新时出现错误的列表项
【发布时间】：2020-09-25 18:13:15
【问题描述】：

我创建了一个带有本地存储的待办事项列表。如果您创建三个列表项并删除第二个，则已删除的列表项将在刷新时重新出现在第三项的位置。

编辑：我不确定它是否与本地存储或原始 todo 数组有关。在下面的代码中，我试图从数组中删除相关值，但我怀疑这不起作用（将数组记录到控制台不会产生任何结果）。

虽然与本地存储无关，但我认为问题在于以下代码：

function removeItem() {
  let item = this.parentNode.parentNode;
  let parent = item.parentNode;
  let id = parent.id;
  console.log(id)
  let value = parent.textContent;
     todo.splice(todo.indexOf(value, 1));
  this.parentNode.parentNode.removeChild(this.parentNode);    
  saveTodos();
}

编辑：这是我用来存储列表项的代码：

function saveTodos() {
  let jsonstr = JSON.stringify(todo);
  localStorage.setItem('todo', jsonstr);
}

    function getTodos() {
      localStorage.getItem('todo')
      let jsonstr = localStorage.getItem("todo");
      todo = JSON.parse(jsonstr);
      if (!todo || !todo.length) {
        todo = [];
      }
      else {
        renderTodoList();

} }

这里是codepen的链接：https://codepen.io/david-webb/pen/yLeqydK

你能帮忙吗？

【问题讨论】：

请在问题本身中包含minimal reproducible example (preferable as snippet <>)，而不仅仅是指向可能无法访问的外部资源的链接（无论出于何种原因）- > How do I ask a good question?
您在问题本身中包含的所有代码都与本地存储无关
看起来不错，本地存储使用您的代码笔对我来说很好....查看存储的内容转到开发工具->应用程序->左侧的本地存储，同时删除获取选择索引并相应地拼接你做错了......
@Aluan Haddad 感谢您的评论，您是对的。我添加了更多细节以尝试更好地解释问题
我认为问题在于您在删除项目后没有更新数组。每个修改数组的函数都应该返回更新后的数组。返回值的函数及其一致的使用使代码更容易理解和推理

标签： javascript arrays local-storage parent-node

【解决方案1】：

这是因为当前代码似乎删除了错误的项目。

看场景：

Localstorage: ["t","1", "2"];

-> 删除项目 #2 ("t")

Localstorage: ["t", "1"];

输出：

如您所见，输出显示 ["t", "2"] 认为本地存储数组是 ["t", "1"]。

这是因为 removeItem 函数中的逻辑有缺陷。

试试这个吧。

//remove list item on click
function removeItem() {
  const item = this.parentNode;
  const value = this.parentNode.lastChild.textContent;
  
  todo = todo.filter(t => t !== value);
  this.parentNode.parentNode.removeChild(item);   
  saveTodos();
}

小提琴：

<input type = "text" style="font-size:25px;" id = "input" placeholder="Write here">

<button id = "addBtn" >Add item</button>

<ul id = "myUL">
</ul>

<script>
let todo = [];

renderTodoList();

document.getElementById('addBtn').addEventListener('click', function () {
  let value = document.getElementById('input').value;
  if (value) {
    todo.push(value);
    saveTodos()
    addInput(value);
  }
});

input.addEventListener("keypress", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
  // Trigger the button element with a click
  document.getElementById("addBtn").click();
}
});


function addInput(text) {
  //add list item on click
  let listItem = document.createElement('li');
  let list = document.getElementById('myUL');
  let input = document.getElementById('input').value;
  let textNode = document.createTextNode(text);

  //create and append remove button
  let removeBtn = document.createElement("BUTTON");
  list.appendChild(removeBtn);
  removeBtn.className = "removeBtn";
  removeBtn.innerHTML = "Remove item";
  listItem.appendChild(removeBtn);
  list.appendChild(listItem);
  listItem.appendChild(textNode);
  document.getElementById("input").value = "";
  removeBtn.addEventListener('click', removeItem);
  console.log(todo);
}

//remove list item on click
function removeItem() {
  const item = this.parentNode;
  const value = this.parentNode.lastChild.textContent;
  
  todo = todo.filter(t => t !== value);
  this.parentNode.parentNode.removeChild(item);   
  saveTodos();
}

function renderTodoList() {
  if (!todo) return
  for (let i = 0; i < todo.length; i++) {
    let value = todo[i];
    addInput(value);
    console.log(value);
  }
}

function saveTodos() {
  let jsonstr = JSON.stringify(todo);
  localStorage.setItem('todo', jsonstr);
}

function getTodos() {
  localStorage.getItem('todo')
  let jsonstr = localStorage.getItem("todo");
  todo = JSON.parse(jsonstr);
  if (!todo || !todo.length) {
    todo = [];
  }
  else {
    renderTodoList();
  }
}



//cross out text on click
/*document.addEventListener('click', function (ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');

  }
});*/

//renderTodoList();
getTodos();
</script>

【讨论】：

随时，@DavidWebb！

【解决方案2】：

我认为问题在于splice 和indexOf 的使用。

对于splice -- 传递索引，如何删除，新建项

var todo = ["a", "b", "c"];
var value = "b"

// your code
todo.splice(todo.indexOf(value, 1));
console.log(todo)


var todo = ["a", "b", "c"];
var value = "b"
// correct way to delete
todo.splice(todo.indexOf(value), 1);

console.log(todo)

【讨论】：

感谢您指出拼接方法的问题。虽然这不是唯一的问题，但肯定是其中之一！

【解决方案3】：

此行有错误todo.splice(todo.indexOf(value, 1));

原因是当你在变量中应用let item = this.parentNode.parentNode;你的UL元素。

修复：

在addInput() 中添加项目时，创建一个跨度并将文本放在跨度内，而不是创建 textNode。

从待办事项中删除时，您应该在 SPAN 标记中使用 innerText todo.splice(todo.indexOf(value, 1));

在value 变量中，您应该有待办事项名称。

【讨论】：