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

Question

我用本地存储创建了待办事项列表。如果您创建了三个列表项并删除了第二个，则删除的列表项将在刷新时重新出现，代替第三个项目。

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

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

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();

} }

这是代码笔的 link：https://codepen.io/david-webb/pen/yLeqydK

你能帮忙吗？

Answer 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();
}

fiddle:

<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>

Answer 2

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

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

修复：

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

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

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

Answer 3

我认为问题出在 splice 和 indexOf 的用法上。

For 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)

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

Local storage - wrong list items appear on refresh

javascript

arrays

local-storage

parent-node