javascript - 每次刷新我注册的页面，都会打印2次，如何解决？

Question

每次我刷新我注册的页面时，它都会打印 2 次。

const form = document.querySelector("#todo-form");
const todoInput = document.querySelector("#todo");
const addTodoBtn = document.querySelector(".btn.btn-danger");
const listGroup = document.querySelector(".list-group");
const removeBtn = document.querySelector("#clear-todos");

form.addEventListener("submit",addTodoToUI);

function addTodoToUI(e){

    createTodoElement(todoInput.value);
    e.preventDefault();
}

function createTodoElement(Name){
  if(Name === ""){

  }
  else{
   const elementLi = document.createElement("li");
    elementLi.className = "list-group-item d-flex justify-content-between";

    const txtNode = document.createTextNode(Name);
    elementLi.appendChild(txtNode);

    const elementA = document.createElement("a");
    elementA.href = "#";
    elementA.className = "delete-item";
    elementA.innerHTML = "<i class = 'fa fa-remove'></i>";

    elementLi.appendChild(elementA);
    listGroup.appendChild(elementLi);


    addTodoToStorage(Name);
  }
}

function getTodosFromStorage(){
  let todosArray;

  if(localStorage.getItem("todos") === null){
    todosArray = [];
  }
  else{
    todosArray = JSON.parse(localStorage.getItem("todos"));
  }

  return todosArray;

}

function addTodoToStorage(todoName){

      let todosArray = getTodosFromStorage();
      todosArray.push(todoName);
      localStorage.setItem("todos",JSON.stringify(todosArray));
}

document.addEventListener("DOMContentLoaded",addTodoFromStorage);

function addTodoFromStorage(){
    let Array1 = getTodosFromStorage();
    Array1.forEach(function (todo){
      createTodoElement(todo);
    });

}

标签： javascript

Answer 1

因为由于某种原因，您createTodoElement在渲染时将项目添加到本地存储中addTodoToStorage(Name);

因此，您需要将渲染部分与添加新元素的部分分开。