时间戳

首页 > 解决方案 > 数组没有在本地存储中被覆盖

javascript - 数组没有在本地存储中被覆盖

问题描述

我正在创建一个待办事项列表项目。当用户单击删除按钮时，我正在尝试删除待办事项。我正在使用数组的过滤器方法来删除单击的待办事项。但是当我刷新时，删除的待办事项又回来了。原因是它没有从本地存储中删除。javascript 文件最底部的事件侦听器有问题。我正在尝试使用返回的任何过滤器方法覆盖数组并将其保存到本地存储中，但它仍然不起作用。

Javascript 文件

import Todo from './todo.js';
import './style.css';

const TODO_LIST_KEY = 'TODO_LIST_KEY';
const template = document.querySelector('#list-item-template');
const todoListContainer = document.querySelector('#list');
const form = document.querySelector('.form');
const inputField = document.querySelector('#todo-input');

const loadList = () => {
  const dataInStringFormat = localStorage.getItem(TODO_LIST_KEY);
  return JSON.parse(dataInStringFormat) || [];
};

const renderTodo = (todo) => {
  console.log("I'm inside of renderTodo Method");
  const templateClone = template.content.cloneNode(true);
  const taskContent = templateClone.querySelector('[data-list-item-text]');
  taskContent.innerText = todo.description;
  const checkBox = templateClone.querySelector('[data-list-item-checkbox]');
  checkBox.checked = todo.completed;
  checkBox.addEventListener('change', () => {
    todo.completed = checkBox.checked;
    saveList();
  });
  const listItem = templateClone.querySelector('.list-item');
  listItem.dataset.todoIndex = todo.index;
  todoListContainer.appendChild(templateClone);
};

let todoList = loadList();
todoList.forEach((todo) => renderTodo(todo));

const saveList = () => {
  localStorage.setItem(TODO_LIST_KEY, JSON.stringify(todoList));
};

const clearField = () => {
  inputField.value = '';
};

form.addEventListener('submit', () => {
  if (inputField.value === '') return;
  // Create a new Todo
  const todoTemplate = new Todo(todoList.length, inputField.value, false);
  todoList.push(todoTemplate); // new todo gets added to the list
  renderTodo(todoTemplate); //Here it adds that new todo to the list
  saveList();
  clearField();
});

todoListContainer.addEventListener('click', (e) => {
  if (!e.target.matches('[data-button-delete]')) return;

  // Get the todo that is clicked on
  const parent = e.target.closest('.list-item');
  const todoIndex = parent.dataset.todoIndex;
  // const todoItem = todoList.find((t) => t.index === todoIndex);
  parent.remove(); // removes from the screen
  todoList = todoList.filter((todo) => todo.index !== todoIndex);
  saveList();
});

HTML 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do List</title>
  </head>
  <body>
    <section class="todo-container">
      <ul class="todo-list" id="list">
        <li class="heading">
          <h3>Today's To Do</h3>
          <img
            src="https://img.icons8.com/ios-glyphs/30/000000/refresh--v1.png"
            alt="refresh-icon"
            class="refresh-icon"
          />
        </li>
        <li>
          <form class="form">
            <label for="todo-input">
              <input
                type="text"
                id="todo-input"
                placeholder="Add to your list..."
              />
            </label>
          </form>
        </li>
      </ul>
      <article class="footer">
        <a href="#">Clear all completed</a>
      </article>
    </section>

    <template id="list-item-template">
      <li class="list-item">
        <label class="list-item-label">
          <input type="checkbox" data-list-item-checkbox />
          <span data-list-item-text></span>
        </label>
        <img
          data-button-delete
          src="https://img.icons8.com/ios-glyphs/30/000000/trash--v1.png"
          alt="delete-icon"
          class="delete-icon"
        />
      </li>
    </template>
  </body>
</html>

标签： javascripthtmllocal-storagearray-filter

解决方案

我猜那todo.index是一个数字。dataset值始终是字符串，因此在不同类型todo.index !== todoIndex时始终为真。todo.indextodoIndex

设置todoIndex为整数：

const todoIndex = parseInt(parent.dataset.todoIndex);

推荐阅读