Not getting how to save To Do in localStorage-CodePudding

I have a todo html element whose inner html i want to save in localstorage through use of html but i am unable to figure out how i would do it.

My javascript code

// Load everything

// get DOM Elements
let to_do_input = document.getElementById("todo-input");
let addBtn = document.getElementById("addBtn");
let display = document.getElementsByClassName("display")[0];

// Event Listeners
addBtn.addEventListener("click", () => {
  // Add DOM ELements
  let list = document.createElement("ul");
  let todos = document.createElement("li");
  let deleteBtn = document.createElement("button");
  deleteBtn.innerText = "Delete";
  // let saveBtn = document.createElement("button");
  // saveBtn.innerText = "Save";

  display.appendChild(list);
  list.appendChild(todos);
  list.appendChild(deleteBtn);
  // list.append(saveBtn);

  //   Class names
  list.classList.add("list");
  todos.classList.add("todos");
  deleteBtn.classList.add("deleteBtn");
  // saveBtn.classList.add("saveBtn");

  //   Set values
  todos.innerHTML = to_do_input.value;
  to_do_input.value = null;

  //   delete todo
  deleteBtn.addEventListener("click", () => {
    list.innerHTML = null;
  });

  //   SAVE todo
  // saveBtn.addEventListener("click", () => {
  //   // let arr = [];
  //   let savedTodo = arr.push(todos.innerHTML);
  //   localStorage.setItem("todo", JSON.stringify(savedTodo));
  // });

  //   Set saved todo
});

and my html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="This web app provides you with accessibility of todo list" />
  <title>Simple To-Do-List</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div >
    <h2>A Reliable To-Do-App</h2>

    <div >
      <input type="text" id="todo-input" placeholder="Write you task here.." />
      <button type="button" id="addBtn" )>Add</button>
    </div>
    <div ></div>
  </div>
  <script src="app.js"></script>
</body>

</html>

I have reviewed from other sites on how to do it but when i tried the array method , it returned numbers or when i tried to push todos into empty array , it didnt do anything. Also i dont know how i will convert the html element into an object to use it while making todo. Rest all the things work fine.

CodePudding user response：

You need to set a array to save list,

So just edit your JS code to :

            // Load everything

            // get DOM Elements
            let to_do_input = document.getElementById('todo-input')
            let addBtn = document.getElementById('addBtn')
            let display = document.getElementsByClassName('display')[0]
            let todoArray = []
            // Event Listeners
            addBtn.addEventListener('click', () => {
                // Add DOM ELements
                let list = document.createElement('ul')
                let todos = document.createElement('li')
                let deleteBtn = document.createElement('button')
                deleteBtn.innerText = 'Delete'
                // let saveBtn = document.createElement("button");
                // saveBtn.innerText = "Save";

                display.appendChild(list)
                list.appendChild(todos)
                list.appendChild(deleteBtn)
                // list.append(saveBtn);

                //   Class names
                list.classList.add('list')
                todos.classList.add('todos')
                deleteBtn.classList.add('deleteBtn')
                // saveBtn.classList.add("saveBtn");

                //   Set values
                todos.innerHTML = to_do_input.value
                todoArray.push(to_do_input.value)
                to_do_input.value = null
                
                //   delete todo
                deleteBtn.addEventListener('click', () => {
                    list.innerHTML = null
                })

                //   SAVE todo
                // saveBtn.addEventListener("click", () => {
                //   // let arr = [];
                //   let savedTodo = arr.push(todos.innerHTML);
                //   localStorage.setItem("todo", JSON.stringify(savedTodo));
                // });

                //   Set saved todo
                localStorage.setItem('todo', JSON.stringify(todoArray))
            })