JavaScript待办事项列表，如何在页面刷新后保持切换类

Question

我在JS中制作待办事项列表：添加新任务、检查任务、删除任务。除了一件事，一切都很好。问题是在将新项目添加到列表之后，它被再次显示并删除类"；"已检查"；来自选中的元素。我想阻止它。我试图删除函数clearList()，它起作用了，但以前的列表保留在屏幕上。页面刷新后如何保持切换类？

"use strict";
let inputData = document.querySelector('[data-input-text]');
let inputTextData = document.querySelector('.to-do-new-input');
let btnAdd = document.querySelector('.btn-add');
let listContainer = document.querySelector('.to-do-list-wrapper');
let tasksList = [];
inputTextData.addEventListener('submit', e=>{
e.preventDefault();
addNewtask(inputData.value);
inputData.value = null;
displayList(...tasksList);
checkTask();
deleteTask(); 
})

function addNewtask(task){
if(task==='') return;
let newTask= task;
tasksList.push(newTask);
}
function displayList(...list){
clearList();
list.forEach((item, index)=>{
let taskRow = 
`
<div class="to-do-list-row" data-target-id="${index}">
<div class="to-do-list-item">${item}</div>
<div class="to-do-list-item-remove btn">
<span class="material-icons btns-ico btn-check">check_circle</span>
<span class="material-icons btns-ico btn-remove">delete</span>
</div>
</div>
`;
listContainer.insertAdjacentHTML('afterbegin', taskRow);

})

}
function clearList(){
while(listContainer.firstChild){
listContainer.removeChild(listContainer.lastChild);
}
}
function checkTask(){
let btnsCheck = document.querySelectorAll('.btn-check');
btnsCheck.forEach(btn=>{
btn.addEventListener('click',e=>{
e.preventDefault();
let taskTarget =  e.target.parentElement.parentElement;
taskTarget.classList.toggle('checked');
})
})
}
function deleteTask(){
let btnsDelete = document.querySelectorAll('.btn-remove');
btnsDelete.forEach(btn=>{
btn.addEventListener('click', e=>{
let taskTarget =  e.target.parentElement.parentElement;
let targetId = taskTarget.dataset.targetId;
tasksList.splice(targetId, 1);
taskTarget.remove(e.target.parentElement.parentElement);
})
})
}

以下是代码和演示的链接：https://codepen.io/Nepri/pen/LYOXRLO

提前谢谢。

我认为这一定是可能的，所以在评论中的回答中，我删除了clearList()，并更改了function addNewTask和function displayList，以保留过去的任务，只添加新的任务。它起作用了，没有清除和切换项目被保留
但它仍然有缺陷，可以只检查第二个任务，或者如果删除了一个任务，则连续检查两个任务，如果不添加新任务，则无法取消选中某些任务。

如果有人能检查一下并告诉我出了什么问题，我将非常感激。

"use strict";
let inputData = document.querySelector('[data-input-text]');
let inputTextData = document.querySelector('.to-do-new-input');
let btnAdd = document.querySelector('.btn-add');
let listContainer = document.querySelector('.to-do-list-wrapper');
let tasksList = [];
let id=tasksList.length;
let previousList;
inputTextData.addEventListener('submit', e=>{
e.preventDefault();
addNewTask(inputData.value);
checkTask();
deleteTask(); 
let id=tasksList.length;
})
function addNewTask(input){
if(input==='') return;
let newTask = input;
id++;
tasksList.push({
"id": id,
"task": newTask,
"status": false
})
inputData.value='';
let lastAddedTask= tasksList.slice(-1);
displayList(...lastAddedTask);
}
function displayList(...list){
if(list===null)return;
list.forEach(item=>{
let listId = item.id;
let listTask = item.task;
let listStatus= item.status;
let newRow=`
<div class="to-do-list-row" data-target-id="${listId}">
<div class="to-do-list-item">${listTask}</div>
<div class="to-do-list-item-remove btn">
<span class="material-icons btns-ico btn-check">check_circle</span>
<span class="material-icons btns-ico btn-remove">delete</span>
</div>
</div>
`;
listContainer.insertAdjacentHTML('afterbegin', newRow);
})
}
function checkTask(){
let btnsCheck = document.querySelectorAll('.btn-check');
btnsCheck.forEach(btn=>{
btn.addEventListener('click', ()=>{
btn.parentElement.parentElement.classList.toggle('checked');
})
})
}
function deleteTask(){
let btnsDelete = document.querySelectorAll('.btn-remove');
btnsDelete.forEach(btn=>{
btn.addEventListener('click', e=>{
let taskTarget =  e.target.parentElement.parentElement;
let targetId = taskTarget.dataset.targetId;
tasksList.splice(targetId, 1);
taskTarget.remove(e.target.parentElement.parentElement);
})
})  
}

Answer 1

就我所能调试的而言，clearList()函数有一些问题，只需在displayList()中注释掉clearList()函数并查看行为即可。

在clearList()函数中，您将删除以前添加的元素，并在代码流中进一步重新添加。因此，每个<div>都会丢失其上的checked类。

尝试将已经检查过的元素存储在内存中，当添加新任务后显示列表时，只需检查以前检查过的任务，然后再次切换它们。

更好地使用数据结构作为taskList=[{taskname: T1, checked: false}....]