每当页面重新加载时，列表中的项目都会在 javascript 中重复

Question

我是一个新手，像 2 周前一样开始使用 js。 我一直在做一个待办事项清单。 在localStorage 中有key toDos &finished。 我希望 toDos 中的值到 go 完成，如果单击 finBtn，则将 class 名称“完成”。 它也应该移动到底部。 起初它有效。 但是，每次刷新页面时，finished 中的内容都会重复。 这个问题困扰了我一个星期。 感谢您的阅读。

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = "toDos";
const FINISHED_LS = "finished";
const NOTSTART_CN = "notStart";
const DONE_CN = "done";


let toDos = [];
let toDosDone = [];


function saveToDos(){
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}

function updateToDos(){
    localStorage.setItem(FINISHED_LS, JSON.stringify(toDosDone));
}

function deleteToDo(event){
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id);
    });
    toDos = cleanToDos;
    saveToDos();
}

function finish(event){
    const btn = event.target;
    const li = btn.parentNode;
    const oldToDos = localStorage.getItem(TODOS_LS);
    const parsedOldToDos = JSON.parse(oldToDos);
    const btnNum = parseInt(li.id) - 1;
    const finishedStuff = parsedOldToDos.splice(btnNum, 1);
    finishedStuff[0].class = DONE_CN;
    li.classList.add(DONE_CN);
    toDos = parsedOldToDos;
    toDosDone = finishedStuff;
    saveToDos();
    updateToDos();
    }

function makeToDos(text){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const delBtn = document.createElement("button");
    const finBtn = document.createElement("button");
    const newId = toDos.length + 1;
    delBtn.innerText="❌";
    delBtn.classList.add("delBtn");
    delBtn.addEventListener("click", deleteToDo);
    finBtn.classList.add("finBtn");
    finBtn.innerText = "✔";
    finBtn.addEventListener("click", finish);
    span.innerText = text;
    li.id = newId;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.appendChild(finBtn);
    toDoList.appendChild(li);
    const toDoObj = {
        text: text,
        id: newId,
        class:""
        };
    toDos.push(toDoObj);
    saveToDos();
}


function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    makeToDos(currentValue);
    toDoInput.value = "";
}

function loadToDos(){
    const loadedToDos = localStorage.getItem(TODOS_LS);
    const loadedFinToDos = localStorage.getItem(FINISHED_LS);
    if(loadedToDos !== null || loadedFinToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
        const parsedFinToDos = JSON.parse(loadedFinToDos);
        parsedToDos.forEach(function(toDo){
            makeToDos(toDo.text);
        });
        parsedFinToDos.forEach(function(done){
            makeToDos(done.text);
        });
    } //else
} //ends of loadToDos

function init(){
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit);
}

init();

Answer 1

您的 localStorage 没有在页面刷新时清理，您应该执行 localStorage.clear(); 每次页面加载使用