不知道如何在 localStorage 中保存待办事项

Question

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.我有一个待办事项 html 元素，我想通过使用 html 将其内部 html 保存在本地存储中，但我不知道该怎么做。

My javascript code我的 javascript 密码

// 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和我的 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 class="container">
    <h2>A Reliable To-Do-App</h2>

    <div class="text-input center">
      <input type="text" id="todo-input" placeholder="Write you task here.." />
      <button type="button" id="addBtn" )>Add</button>
    </div>
    <div class="display"></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.我也不知道如何将 html 元素转换为 object 以在制作待办事项时使用它。 Rest all the things work fine. Rest 一切正常。

Answer 1

You need to set a array to save list,您需要设置一个数组来保存列表，

So just edit your JS code to:因此，只需将您的 JS 代码编辑为：

            // 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))
            })

不知道如何在 localStorage 中保存待办事项

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-12-28 06:11:34

不知道如何在 localStorage 中保存待办事项

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-12-28 06:11:34

解决方案1
1 已采纳 2022-12-28 06:11:34