Question

我正在为每个任务项目创建一个具有可编辑功能的任务列表。我期望的是，当我更新项目的值时，LocalStorage中的值会同时更新。当前，LocalStorage中的值可以更新，但是，无论我修改哪个项目的值，它都仅更新其最后一个值。并且应该更改的一个不被修改。修改任务项时如何更改正确的localStorage值？

const todo__input = document.querySelector(".todo__input")
const add__btn = document.querySelector(".add__btn")
const item__sector = document.querySelector(".item__sector")

function createToDoItem(toDoItem) {
  const position = "beforeend"
  const item = `
    <div class="item">
      <input type="checkbox" class="done__btn">
      <input type="text" class="item__content" value="${toDoItem}" disabled>
      <button class="edit__btn"><i class="far fa-edit"></i></button>
      <button class="delete__btn"><i class="far fa-trash-alt"></i></button>
    </div>
  `
  item__sector.insertAdjacentHTML(position, item)
  return item__sector
}

// load todo item from localstorage when page is loaded
document.addEventListener("DOMContentLoaded", getLocalStorage)

// add item to the item sector
add__btn.addEventListener("click", e => {
  e.preventDefault()
  const input__value = todo__input.value
  if (input__value.trim() === "") { return }
  createToDoItem(input__value)
  saveLocalStorage(input__value)
  todo__input.value = ""
})

// keypress Enter
document.addEventListener("keypress", e => {
  if (e.keyCode == 13) {
    e.preventDefault()
    const input__value = todo__input.value
    if (input__value.trim() === "") { return }
    createToDoItem(input__value)
    saveLocalStorage(input__value)
    todo__input.value = ""
  }
})


// the function on item (done, edit, and delete)
item__sector.addEventListener("click", e => {
  const parent = e.target.parentElement

  // done
  if (e.target.classList.contains("done__btn")) {
    e.target.nextElementSibling.classList.toggle("done__color")
  }
  // edit the todo item 
  if (e.target.classList.contains("edit__btn")) {
    if (e.target.previousElementSibling.disabled.disabled == true) {
      e.target.previousElementSibling.disabled = !e.target.previousElementSibling.disabled

    } else {
      e.target.previousElementSibling.disabled = !e.target.previousElementSibling.disabled
      e.target.previousElementSibling.setAttribute("value", e.target.previousElementSibling.value)
      editLocalStorage(e.target.previousElementSibling)
    }
  }
  // delete todo item
  if (e.target.classList.contains("delete__btn")) {
    parent.remove()
    deleteLocalStorage(e.target.previousElementSibling.previousElementSibling)
  }
})

// function for check todo status in the LocalStorage
function checkLocalStorage() {
  let todos
  if (localStorage.getItem("todos") === null) {
    todos = []
  } else {
    todos = JSON.parse(localStorage.getItem("todos"))
  }
  return todos
}

// function for save localstorage
function saveLocalStorage(todo) {
  const todos = checkLocalStorage()
  todos.push(todo)
  localStorage.setItem("todos", JSON.stringify(todos))
}

// function for get item and render to the screen from localstorage
function getLocalStorage() {
  const todos = checkLocalStorage()
  todos.forEach(todo => {
    createToDoItem(todo)
  })
}

// edit localStorage 

function editLocalStorage(todo) {
  const todos = checkLocalStorage()
  const todoIndex = todo.getAttribute("value")
  todos.splice(todos.indexOf(todoIndex), 1, todoIndex)
  localStorage.setItem("todos", JSON.stringify(todos))
}

====

<body>
  <div class="container">
    <h1 class="title">My To-Do List</h1>
    <form class="add__todo">
      <input type="text" class="todo__input" placeholder="Add a task...">
      <button class="add__btn">Add</button>
    </form>
    <div class="item__sector">

    </div>
    <div class="item__status">
      <button class="all">All</button>
      <button class="completed">COMPLETE</button>
      <button class="incompleted">UNCOMPLETE</button>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  <script src="app.js"></script>
</body>

谢谢。

Answer 1

导致您的解决方案编辑最后一个值的原因是：-

editLocalStorage函数中的todoIndex变量正在从您的输入中引用新的更新值，该值尚未存储在本地存储的todos数组中，因此indexOf()返回{{1}因此编辑最后一个值。

我通过对函数-1，item__sector.addEventListener进行了调整来重写了JS，并添加了全局变量editLocalStorage

代码段

edit__index

注意：在极端情况下，有多个待办事项具有相同的价值，需要解决。

更新localStorage值（待办事项列表）

1 个答案: