Javascript 使用splice正在从数组中删除错误的值

我已经用Javascript构建了一个待办事项列表应用程序，正如所有学习者在某个时候所做的那样，我正在尝试在应用程序关闭或刷新时使用本地存储来存储这些值。我将它们存储在这些空阵列中：

var data = (localStorage.getItem('todolist')) ? 
JSON.parse(localStorage.getItem('todolist')):{
    todo: [],
    completed: []
};

为此，每当一个元素添加到列表中时，它都会进入待办事项列表及其数组，完成后，它应该从待办事项数组中删除并添加到完成的待办事项数组中。我已经使用if语句完成了这项工作：

if (id === 'todo') {
    data.todo.splice(data.todo.indexOf(value), 1);
    data.completed.push(value);
  } else {
    data.completed.splice(data.completed.indexOf(value), 1);
    data.todo.push(value);
  }

但是，我不知道为什么，数组中存储的值似乎以错误的顺序移动。例如，如果值“a”、“b”、“c”在待办事项数组中，将“a”列表项从待办事项移动到已完成事项，将导致已完成的数组获得“a”，但待办事项数组将删除“c”，而在存储中保留重复的“a”

我在if语句中使用了console.log（indexOf（value）），这导致了-1，我无法理解为什么，因为数组确实包含数字，并且它是在这一点之前创建和填充的。如果有人能帮我指出哪里出了问题，我将不胜感激。这是我的密码：

var data = (localStorage.getItem('todolist')) ? 
JSON.parse(localStorage.getItem('todolist')):{
    todo: [],
    completed: []
};

renderTodoList();


//User clicked on add, adding any text in input field to to-do field.
document.getElementById('add').addEventListener('click', function(){
var value = document.getElementById('item').value;
if (value){
    addItem(value);
};
});

document.getElementById('item').addEventListener('keydown', function (e){
var value = this.value;
if (e.code === 'Enter' && value){
    addItem(value);
}
});

function addItem(value) {
addItemToDOM(value);
document.getElementById('item').value = '';

data.todo.push(value);
dataObjectedUpdated();
}

//Render list from memory.
function renderTodoList() {
if (!data.todo.length && !data.completed.length) return;

for (var i = 0; i <data.todo.length; i++){
    var value = data.todo[i];
    addItemToDOM(value);
}

for (var j = 0; j <data.completed.length; j++) {
    var value = data.completed[j];
    addItemToDOM(value, true);
}
}

function dataObjectedUpdated() {
localStorage.setItem('todolist', JSON.stringify(data));
console.log(data);
}

//Delete's item from list.
function removeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;
var id = parent.id;
var value = item.innerText;

if (id === 'todo'){
    data.todo.splice(data.todo.indexOf(value), 1);
} else {
    data.completed.splice(data.completed.indexOf(value), 1);
}
console.log(value);
dataObjectedUpdated();

parent.removeChild(item);
}

//When item is completed or uncompleted - moving between lists.
function completeItem() {
var item = this.parentNode.parentNode;
var parent = item.parentNode;  
var id = parent.id;
var value = item.innerText;


if (id === 'todo') {
    data.todo.splice(data.todo.indexOf(value), 1);
    data.completed.push(value);
  } else {
    data.completed.splice(data.completed.indexOf(value), 1);
    data.todo.push(value);
  }
dataObjectedUpdated();


//Check if item should be added to todo or completed list
var target = (id === 'todo') ? document.getElementById('completed'): document.getElementById('todo');

parent.removeChild(item);
target.insertBefore(item, target.childNodes[0]);
}

//Add item to DOM list
function addItemToDOM(text, completed){

var list = (completed) ? document.getElementById('completed') : document.getElementById('todo');

var item = document.createElement('li');
item.innerText = text;

var buttons = document.createElement('div');
buttons.classList.add('buttons');

var remove = document.createElement('button');
remove.classList.add('remove');
remove.innerHTML = removeSVG;

//Add click event for removing an item
remove.addEventListener('click', removeItem);


var complete = document.createElement('button');
complete.classList.add('complete');
complete.innerHTML = completeSVG;

//Add click event for completing an item
complete.addEventListener('click', completeItem);

buttons.appendChild(remove);
buttons.appendChild(complete);
item.appendChild(buttons);

list.insertBefore(item, list.childNodes[0]);
}

var data=（localStorage.getItem（'todolist'））？
JSON.parse（localStorage.getItem（'todolist'））：{
待办事项：[]，
已完成：[]
};
RenderToList（）；
//用户单击添加，将输入字段中的任何文本添加到待办事项字段。
document.getElementById（'add'）.addEventListener（'click'，function（）{
var值=document.getElementById（'item'）。值；
如果（值）{
附加项（值）；
};
});
document.getElementById（'item'）。addEventListener（'keydown'，函数（e）{
var值=此值；
如果（例如，代码=='输入'&&值）{
附加项（值）；
}
});
函数附加项（值）{
附加项（值）；
document.getElementById（'item'）。值=“”；
data.todo.push（值）；
dataObjectedUpdated（）；
}
//从内存中呈现列表。
函数renderTodoList（）{
如果（！data.todo.length&&！data.completed.length）返回；
对于（var i=0；i更改
addToDom
函数，使文本保持在指定的元素内，如span。此外，当您试图获取
内部文本时，您应该从该span获取它

这是对
addToDom
函数的更改：

var item=document.createElement（'li'）；
var span=document.createElement（'span'）；
span.innerText=文本；
item.append（span）；

在completeItem函数中，应将
值
变量更改为：

var-value=item.getElementsByTagName（'span'）[0]。innerText；
检查
value
的
typeof
，或者在执行以下操作时执行
value.toString（）
操作：
data.todo.splice（data.todo.indexOf（value.toString（）），1）；
推送“item.value”，但当splice使用“item.innerText”作为值时！
<div class="container">
<!-- Incomplete tasks --->
<ul class="todo" id="todo"></ul>

<!--Completed tasks-->
<ul class="todo" id="completed"></ul>
</div>