localStorage 待办事项列表

时间:2021-04-08 09:46:09

标签: javascript local-storage

我正在尝试将待办事项列表保存在本地存储中,但它不会发生我不知道我错过了什么。
我的目标是:
1 - 当我添加待办事项时,它将被保存
2 - 当我删除一个任务时,它会从本地存储中删除。

//The icon add classes
const fas = document.querySelector(".fas");
const ul = document.querySelector("ul");
const input = document.querySelector("input");
/*
  LocalStorage trying to implement the number id
*/
let taskNumber = 0;
let myTask = new Object();
const singleTask = "Task";

/**
 * End Local Storage
 */

//Grab the input
fas.addEventListener("click", () => {
  const li = document.createElement("li");
  const icon = document.createElement("i");
  const anotherIcon = document.createElement("i");
  anotherIcon.classList = "fas fa-check";
  icon.classList = "fas fa-times";
  const inputValue = input.value;
  li.innerHTML = inputValue;
  li.appendChild(icon);
  li.appendChild(anotherIcon);
  icon.addEventListener("click", () => {
    li.parentElement.removeChild(li);
  });
  anotherIcon.addEventListener("click", () => {
    li.style.background = "#013a6b";
    li.style.color = "#fff";
    li.style.textDecoration = "line-through";
  });
  if (inputValue == "") {
    return;
  }
  ul.appendChild(li);
  input.value = "";

  /**
   * Local Storage
   */
  let myStorage = window.localStorage;
  myTask.task = ++taskNumber + " " + inputValue;
  myStorage.setItem(singleTask, JSON.stringify(myTask.task));
  console.log(myStorage);
});

0 个答案:

没有答案