ToDo 列表 html css js 与 localstorage

Question

我搜索了很多关于使用本地存储的待办事项列表js，但没有找到我想要的。

如何在写任何东西之前建立一个待办事项列表并添加数据？在这张照片中，我没有放任何东西并显示任务：

Answer 1

首先你需要从本地存储中获取数据。在下面的示例中，我使用了一个数据数组，因为我无法在 Whosebug 中使用 localStorage。然后迭代数组并为每一行创建一个新的列表元素并将其附加到您的待办事项列表中。

工作示例

const form = document.querySelector("form");
const input = document.querySelector("#input");
const list = document.querySelector("ul");
const data = ["task 1", "task 2"];

function init() {
  data.forEach(e => {
    let li = document.createElement('li');
    li.innerHTML = e;
    const delBtn = document.createElement("button");
    delBtn.innerText = 'x'
    li.append(' ',delBtn);
    list.append(li)

  })
}
init();
///

form.addEventListener("submit", function(e) {
  e.preventDefault();
  toDoLine();
  input.value = "";
});

list.addEventListener('click', function(e){
  if (e.target.nodeName === 'BUTTON') {
      e.target.closest('LI').remove();
  }
})


function toDoLine() {
  if (input.value !== '') {
  const toDo = input.value;
  const newLi = document.createElement("li");
  newLi.innerText = toDo;
  const delBtn = document.createElement("button");
  delBtn.innerText = 'x'
  newLi.append(' ', delBtn);
  list.append(newLi);
    } else {
      alert('add something to the list!')
    }
  }

body {
  text-align: center;
}
#list {
  display: inline-block;  
}

li {
  text-align: left;
}

<h1>To Do List</h1>
<div>
  <form>
    <input action ='/test' id="input" type="text" placeholder="task">
    <button id='submit'>submit</button>
  </form> 
</div>
<div id='listdiv'>
    <ul id="list"></ul>
</div>

ToDo 列表 html css js 与 localstorage

ToDo list html css js with localstorage

html

javascript

css

local-storage