阵列未在本地存储中被重写
我正在创建一个待办事项列表项目。当用户单击删除按钮时，我正在尝试删除todo。我正在使用数组的filter方法删除单击的todo。但当我刷新时，删除的todo会返回。原因是它没有从本地存储中删除。javascript文件最底部的事件侦听器有问题。我试图用filter方法返回的任何内容覆盖数组，并将其保存到本地存储中，但仍然不起作用。
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();
});
超文本标记语言文件
<!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>
共有1个答案
我猜是待办事项。索引是一个数字<代码>数据集值始终是字符串，因此todo。索引！==todoIndex在执行todo时始终为真。索引和todoIndex是不同的类型。
将todoIndex设置为整数：
const todoIndex = parseInt(parent.dataset.todoIndex);
-
问题内容： 如果我不需要localStorage，我的代码将如下所示： 这可行。但是，我需要将此变量存储在localStorage中，事实证明它很顽固。我试过了： 我要去哪里错了？ 问题答案： 仅支持字符串。使用和。
-
问题内容： 如果我不需要localStorage，我的代码将如下所示： 这可行。但是，我需要将此变量存储在localStorage中，事实证明它很顽固。我试过了： 我要去哪里错了？ 问题答案： 仅支持字符串。使用和。
-
localStorage 本地存储 存储针对QQ帐号隔离 数据存储于本地文件中。游戏结束后不会被删除 函数 key( index) 获取对应索引的key 手q 版本7.8.5 参数 参数名 类型 说明 index number 索引值 返回值 类型 说明 string 说明 示例 var stringKey = BK.localStorage.key(0); getItem( key) 获取ke
-
我有一个git远程存储库，上面有用户名和密码。 当我克隆我的存储库时，因为它有很多子存储库内部。每次我都必须输入我的用户名和密码。 我可以从git服务器读取。 如何永久存储我的用户名和密码以使用远程存储库？
-
本地存储提供了localstore和sessionstore两个类。localstore使用本地文件持久化数据，因此该类存储的数据不会失效。sessionstore存储的数据会在插件运行结束时清空，因此有效期为插件运行期。localstore和sessionstore的API接口一致。 set QN.localstore.set({ query: { key: 'name'
-
我有一个存储在中，我也有一个方法来验证令牌是否正确，正如您在这段代码中看到的： 如果令牌我将返回null，否则继续验证。 有两个问题我不能理解： 为什么我刷新页面时丢失了本地存储的令牌 为什么返回false当是时，第一个console.log返回未定义的，但我的方法继续。