Сохранить элементы списка дел в локальном хранилище в Javascript - PullRequest
Новая
       8

Сохранить элементы списка дел в локальном хранилище в Javascript

0 голосов
/ 27 мая 2020

Я сделал список дел в Vanilla JS, и мне удалось сохранить новые элементы, которые я добавляю в локальное хранилище, но проблема возникает, когда я удаляю элемент или перетаскиваю его в столбец «Готово». Когда я перезагружаю сайт, он не сохраняет эти изменения. Я знаю, что проблема в том, что массив, который я сохраняю в локальном хранилище, все еще включает удаленные / перетаскиваемые элементы, но я не уверен, почему. Спасибо за помощь !! 

const search = document.querySelector(".js-search");
const searchForm = document.querySelector(".js-search-form");
const taskList = document.querySelector(".js-tasks");
const addForm = document.querySelector(".js-add");
const done = document.querySelector(".js-done-tasks");
const addTask = document.querySelector(".js-add-task");
const input = document.querySelector(".js-input");
const taskPlus = document.querySelector(".task-plus");

let newTasks = [];
let newLSTasks = [];


function getLocalStorage() {
  newLSTasks = localStorage.getItem("newLSTasks");
  newLSTasks = JSON.parse(newLSTasks);
  if (newLSTasks !== null) {
    newTasks = newLSTasks;
    newTasks.forEach((task) => {
      generateTasksHtml(task);
      handlerSearchTask();
      drag();
    });
  }
}

// ADD NEW TASK
const handlerAddTask = (ev) => {
  ev.preventDefault();
  const task = input.value.trim();
  if (task.length) {
    generateTasksHtml(task);
    newTasks.push(task);
    handlerValidation();
    addForm.reset();
  }
  drag();
  localStorage.setItem("newLSTasks", JSON.stringify(newTasks));
};

const generateTasksHtml = (task) => {
  let html = "";
  const now = new Date();
  html = `<li class="item-added li list-group-item d-flex justify-content-between align-items-center" draggable="true">${task}<span class="date">${now.toLocaleDateString()}<i class="fas fa-trash-alt delete"></i></span></li>`;
  taskList.innerHTML += html;

  const deleteBtns = document.querySelectorAll(".delete");
  deleteBtns.forEach((deleteBtn) => {
    deleteBtn.addEventListener("click", deleteTask);
  });
};

handlerValidation = () => {
  if (input.value.length) {
    addTask.classList.add("cursor");
    taskPlus.classList.add("validated");
  } else {
    addTask.classList.remove("cursor");
    taskPlus.classList.remove("validated");
  }
};

// SEARCH FOR A TASK
const handlerSearchTask = () => {
  const searchTerm = search.value.trim().toLowerCase();
  filterTasks(searchTerm);
};

const filterTasks = (searchTerm) => {
  let tasks = Array.from(taskList.children);

  tasks
    .filter((task) => !task.textContent.toLowerCase().includes(searchTerm))
    .forEach((task) => task.classList.add("hidden"));

  tasks
    .filter((task) => task.textContent.toLowerCase().includes(searchTerm))
    .forEach((task) => task.classList.remove("hidden"));
};

// DELETE TASKS
function deleteTask(ev) {
  if (ev.target.classList.contains("delete")) {
    ev.target.parentElement.parentElement.remove();
  }
}

// DRAG TASKS
function drag() {
  let tasks = Array.from(taskList.children);
  tasks.forEach((item) => {
    item.addEventListener("dragstart", dragStart);
    item.addEventListener("dragend", dragEnd);

    function dragStart(ev) {
      draggedItem = ev.target;
      this.classList.add("hold");
      setTimeout(() => this.classList.add("hidden"), 0);
    }

    function dragEnd() {
      this.classList.remove("hidden", "hold");
      this.style.display = "block";
    }
  });
}
function dragOver(ev) {
  ev.preventDefault();
  this.style.backgroundColor = "#311b9265";
}
function dragEnter(ev) {
  ev.preventDefault();
  this.style.backgroundColor = "#352f5b00";
}
function dragLeave(ev) {
  ev.preventDefault();
  this.style.backgroundColor = "#352f5b00";
}
function dragDrop() {
  this.prepend(draggedItem);
  this.classList.add("done");
  this.style.backgroundColor = "#352f5b00";
}
function dragDropBack() {
  this.prepend(draggedItem);
  this.classList.remove("done");
  this.style.backgroundColor = "#352f5b00";
}

//EVENT LISTENERS

addForm.addEventListener("submit", handlerAddTask);
addTask.addEventListener("click", handlerAddTask);
taskPlus.addEventListener("click", handlerAddTask);
search.addEventListener("keyup", handlerSearchTask);
input.addEventListener("keyup", handlerValidation);
done.addEventListener("click", deleteTask);

drag();

done.addEventListener("dragover", dragOver);
taskList.addEventListener("dragover", dragOver);

done.addEventListener("dragenter", dragEnter);
taskList.addEventListener("dragenter", dragEnter);

done.addEventListener("dragleave", dragLeave);
taskList.addEventListener("dragleave", dragLeave);

done.addEventListener("drop", dragDrop);
taskList.addEventListener("drop", dragDropBack);

getLocalStorage();
...