数组不会在本地存储中被覆盖

Question

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

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>

Answer 1

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

将todoIndex设置为一个整数：

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

数组不会在本地存储中被覆盖

Array isn't getting overridden in local storage

javascript

html

local-storage

array-filter