将待办事项保存在 localStorage 中

Question

我创建了一个待办事项应用程序，我想将待办事项保存在localStorage.

我想添加这样的localStorage属性：

addForm.addEventListener("submit", (e) => {
    e.preventDefault();
    let todo = addForm.add.value.trim();
    if (todo.length) {
        localStorage.setItem(todo);
        generateTemplate(todo);
        addForm.reset();
    }
}

但是，它不起作用。

所以，我的问题是，在代码的哪一部分添加属性是最佳实践，在哪一部分最好也添加getItem方法？

---

这是没有localStorage属性的整个代码：

addForm.addEventListener("submit", (e) => {
    e.preventDefault();
    let todo = addForm.add.value.trim();
    if (todo.length) {
        localStorage.setItem(todo);
        generateTemplate(todo);
        addForm.reset();
    }
}

const addForm = document.querySelector(".add");
const list = document.querySelector(".todos");
const search = document.querySelector(".search input");

// generate new toDo's
const generateTemplate = (todo) => {
  let html = ` <li class="list-group-item d-flex justify-content-between align-items-center">
    <span>${todo}</span><i class="far fa-trash-alt delete"></i>
  </li>`;
  list.innerHTML += html;
};

// submit the todo
addForm.addEventListener("submit", (e) => {
  e.preventDefault();
  let todo = addForm.add.value.trim();
  if (todo.length) {
    generateTemplate(todo);
    addForm.reset();
  }
});

// delete todo's

list.addEventListener("click", (e) => {
  if (e.target.classList.contains("delete")) {
    e.target.parentElement.remove();
  }
});

// filter the toDo's

const filterTodos = (term) => {
  Array.from(list.children)
    .filter((todo) => !todo.textContent.toLowerCase().includes(term))
    .forEach((todo) => todo.classList.add("filtered"));

  Array.from(list.children)
    .filter((todo) => todo.textContent.toLowerCase().includes(term))
    .forEach((todo) => todo.classList.remove("filtered"));
};

search.addEventListener("keyup", () => {
  const term = search.value.trim().toLowerCase();
  filterTodos(term);
});

body {
  background-color: #352f5b;
}

.container {
  max-width: 400px;
}

input[type="text"],
input[type="text"]:focus {
  color: #fff;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  max-width: 400px;
}

.todos li {
  background: #423a6f;
}

.delete {
  cursor: pointer;
}

.filtered {
  display: none !important;
}

Answer 1

Storages 对象（您与 LocalStorage 一起使用的对象）允许保存字符串（具体来说是 DOMStrings），因此如果您想保存一个 javascript 对象，您应该先将其转换为字符串（例如使用JSON.stringify）

此外，在您的代码中， for 的语法setItem不正确。您需要指定一个标识对象的键

   localStorage.setItem('todo', todo);

请注意，这只会保存一个待办事项。因此，当您返回 todo 时，您将需要执行localStorage.getItem('todo')此操作，这当然只会返回您保存的最后一个 todo。

对此的解决方案可能是为您的待办事项提供一个存储空间：

var todos = []

每次你创建一个新的 todo 时，你都会将该 todo 添加到这个对象中

todos.push(todo)

并将其保存到本地存储

localStorage.setItem('todos', JSON.stringify(todos))

当您返回该列表时，您将需要解析该字符串以获取实际对象：

var todosString = localStorage.getItem('todos');
var todos = JSON.parse(todosString);

考虑到这只会将您的待办事项数据放入该变量中。然后你需要重新填充你的dom。这可以通过重用您的generateTemplate函数来完成。例如。

todos.forEach(todo => generateTemplate(todo));

我还建议您查看 LocalStorage 的 MDN 页面：https : //developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

以及使用 Web Storage API 页面的完整工作示例：https : //developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API