items saved and get by localstorage as well, but will disappear on page refresh

Question

i have an array named todoList, all of my data is in it. i saved them to localstorage like this: https://codepen.io/arashkazerouni/pen/YzLxdoQ

const saveToLocal = (array) => {
  window.localStorage.setItem("todo", JSON.stringify(array));
};

todoList = JSON.parse(window.localStorage.getItem("todo"));

i used this saveToLocal function after any change in todoList, and it works. the only problem is when i refresh the page, all items gone. but if i add new todo, all of them will shown again

and there is page script :

const input = document.querySelector("input");
const button = document.querySelector("button");
const todos = document.querySelector(".todos");
const alertRed = document.querySelector(".alert-red");

let todoList = [];
const saveToLocal = (array) => {
  window.localStorage.setItem("todo", JSON.stringify(array));
};

todoList = JSON.parse(window.localStorage.getItem("todo"));
const addToDOM = () => {
  // todos.innerHTML = "";
  for (let i = 0; i < todoList.length; i++) {
    const html = `
    <div class="todo" id=${i}>
    <p class="todo-text" >${todoList[i]}</p>
    <i class="fa-solid fa-check" ></i>
    <i class="fa-solid fa-trash"></i>
    </div>
    `;
    todos.insertAdjacentHTML("beforeend", html);
  }
};
// Add items to list
button.onclick = (e) => {
  e.preventDefault();
  // todos.innerHTML = "";
  if (!todoList.includes(input.value) && input.value !== "") {
    todoList.push(input.value);
    saveToLocal(todoList);
  }
  // console.log(todoList);
  addToDOM();
  input.value = "";
};
// Handle Enter Press
document.onkeypress = (e) => {
  if (e.key === "Enter") {
    button.click();
  }
};
todos.onclick = (e) => {
  e.preventDefault();
  const isCheck = e.target.classList.contains("fa-check");
  const isTrash = e.target.classList.contains("fa-trash");
  if (isCheck) e.target.previousElementSibling.classList.toggle("checked");
  if (isTrash) {
    const element = e.target.parentElement;
    const elementID = parseInt(element.id);
    element.classList.add("removed");
    todoList = todoList.filter((element) => element !== todoList[elementID]);
    saveToLocal(todoList);
    setTimeout(() => {
      addToDOM();
    }, 300);
  }
};