时间戳

首页 > 解决方案 > 我如何将本地存储用于待办事项列表？

javascript - 我如何将本地存储用于待办事项列表？

问题描述

我被要求有一个待办事项列表并通过本地存储保存每个任务（用户提供的以及原始的）。我的老师对完全不同的东西做了一个非常简单的演示，我花了几个小时试图弄清楚。当我查看解决方案时，老实说，我无法弄清楚。它看起来很复杂，我什至不知道从哪里开始。如果有人可以给我任何提示，那就太棒了！

我的代码：

let ul = document.querySelector('ul');

let newItem = document.querySelector('input[type=text]');
let checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');

function output() {
    let newTodo = document.createElement('li');
    newTodo.innerText = newItem.value;
    newTodo.classList.add('todo');
    let ulAppend = ul.append(newTodo);
    ul.append(newTodo);
    let checkboxAppend = newTodo.append(checkbox);
    newTodo.append(checkbox);
    newItem.value = '';
}

let button = document.querySelector('.btn');
button.addEventListener('click', output);

ul.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        e.target.remove();
    } else if (e.target.tagName === 'INPUT') {
        e.target.parentElement.classList.toggle('finished');
    }
});

我老师的代码/本地存储方案：

const todoForm = document.getElementById("newTodoForm");
const todoList = document.getElementById("todoList");

// retrieve from localStorage
const savedTodos = JSON.parse(localStorage.getItem("todos")) || [];
for (let i = 0; i < savedTodos.length; i++) {
  let newTodo = document.createElement("li");
  newTodo.innerText = savedTodos[i].task;
  newTodo.isCompleted = savedTodos[i].isCompleted ? true : false;
  if (newTodo.isCompleted) {
    newTodo.style.textDecoration = "line-through";
  }
  todoList.appendChild(newTodo);
}

todoForm.addEventListener("submit", function(event) {
  event.preventDefault();
  let newTodo = document.createElement("li");
  let taskValue = document.getElementById("task").value;
  newTodo.innerText = taskValue;
  newTodo.isCompleted = false;
  todoForm.reset();
  todoList.appendChild(newTodo);

  // save to localStorage
  savedTodos.push({ task: newTodo.innerText, isCompleted: false });
  localStorage.setItem("todos", JSON.stringify(savedTodos));
});

todoList.addEventListener("click", function(event) {
  let clickedListItem = event.target;

  if (!clickedListItem.isCompleted) {
    clickedListItem.style.textDecoration = "line-through";
    clickedListItem.isCompleted = true;
  } else {
    clickedListItem.style.textDecoration = "none";
    clickedListItem.isCompleted = false;
  }

  // breaks for duplicates - another option is to have dynamic IDs
  for (let i = 0; i < savedTodos.length; i++) {
    if (savedTodos[i].task === clickedListItem.innerText) {
      savedTodos[i].isCompleted = clickedListItem.isCompleted;
      localStorage.setItem("todos", JSON.stringify(savedTodos));
    }
  }
});

即使我的代码更简单（至少据我所知），它的工作原理与他的代码完全一样。

标签： javascriptjsonlocal-storage

解决方案

本地存储将 JSON 对象保存到用户的计算机。您应该创建一个待办事项数组，将该数组附加到每个新待办事项中，然后将该项目设置为本地存储。

let ul = document.querySelector('ul');

const savedTodos = JSON.parse(localStorage.getItem("todos")) || []; // Retrieves local storage todo OR creates empty array if none exist
let newItem = document.querySelector('input[type=text]');
let checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');

function output() {
    let newTodo = document.createElement('li');
    newTodo.innerText = newItem.value;
    newTodo.classList.add('todo');
    ul.append(newTodo);
    newTodo.append(checkbox);

    savedTodos.push({task: newItem.value, isCompleted: false}); // Appends the new todo to array
    localStorage.setItem("todos", JSON.stringify(savedTodos)); //Converts object to string and stores in local storage

    newItem.value = '';
}

推荐阅读