JS:删除本地存储/隐藏按钮文本

晚上好。试图包装我的待办事项列表，我无法删除项目从localStorage没有删除一切从使用错误的关键或内容只是重新出现在页面刷新。第二个较小的问题是按钮文本合并到innerText，就像它应该的那样，但我找不到一种方法来排除它。它目前被注释掉了，如果我不这样做，那么它就打破了以前的条目。我在下面留下了我最近的，相当糟糕的尝试，但除此之外，其余的似乎都在工作。

不确定是否可以附加整个代码，但这里是下面。

const todoForm = document.querySelector('#todoForm');
const todoList = document.querySelector('#todoList');
let todoItem = document.querySelector('#todoItem');
// const todo = JSON.parse(localStorage.getItem('todo'));
// Pull from storage
const savedList = JSON.parse(localStorage.getItem('todo')) || [];
for (let i = 0; i < savedList.length; i++) {
const newTodo = document.createElement('li');
newTodo.innerText = savedList[i].item;
const newButton = document.createElement('button');
let itemId = { id: new Date().getTime() };
// newButton.innerText = 'Remove';
newButton.setAttribute('id', itemId.id);
newTodo.isCompleted = savedList[i].isCompleted ? true : false;
if(newTodo.isCompleted) {
newTodo.style.textDecoration = 'line-through';
}
todoList.appendChild(newTodo);
newTodo.appendChild(newButton);
}
// Add Item and Remove Button
todoForm.addEventListener('submit', function(e){
e.preventDefault();
const newTodo = document.createElement('li');
const newItem = document.querySelector('#todoItem').value;
const newButton = document.createElement('button');
let itemId = { id: new Date().getTime() };
// newButton.innerText = 'Remove';
newButton.setAttribute('id', itemId.id);
newTodo.innerText = newItem;
newTodo.setAttribute('id', itemId.id);
newTodo.isCompleted = false;
todoList.appendChild(newTodo);
newTodo.appendChild(newButton);
todoForm.reset();
// Save to storage 
savedList.push({ item: newTodo.innerText, isCompleted: false, id: new Date().getTime() });
localStorage.setItem('todo', JSON.stringify(savedList));
});
// Strike Through Item
todoList.addEventListener('click', function(e){
let clickListItem = e.target;
if (!clickListItem.isCompleted){
clickListItem.style.textDecoration = 'line-through';
clickListItem.isCompleted = true;
} else {
clickListItem.style.textDecoration = 'none';
clickListItem.isCompleted = false;
}
for (let i = 0; i < savedList.length; i++) {
if (savedList[i].item === clickListItem.innerText) {
savedList[i].isCompleted = !savedList[i].isCompleted;
localStorage.setItem('todo', JSON.stringify(savedList));
}
}
});
// Remove from storage
todoList.addEventListener('click', function(e){
let removeItem = e.target;
const taskId = e.target.id;
if (e.target.tagName === 'BUTTON'){
e.target.parentNode.remove();
removeFunc(taskId);
}
});
function removeFunc(taskId){
for (let i = 0; i < savedList.length; i++){
const key = savedList[i].id;
if(key === taskId.id){
localStorage.removeItem(key);
localStorage.setItem('todo', JSON.stringify(savedList));
}
}
}

谢谢你的建议。

我的第一个猜测是，由于在两个不同的时间被调用的Date.getTime()定义的id，这些id是不相同的。我建议，当您在函数末尾推到savedList以添加项目时，将id设置为newItem.id，就像您为项目名称一样，而不是再次调用getTime()

我确实在你的代码中看到一些问题。

删除重新出现的文本因为在添加项时，您将创建todo对象，并将项值设置为newTodo。innerText，如果你检查本地存储中保存的值它会保留额外的Remove这是因为innerText获取newTodo下元素的文本(在我们的例子中，我们在那里有一个按钮)。作为修复，您只需要设置textbox的实际值，而不是innerText。您已经将其存储在名为newItem

是的，就像@cfinn16指出的那样，我们在这里保存的id将是number格式，当您比较remove按钮属性的id与savedList数组的id时，您将看到不匹配。作为解析，您可以转换getTime(). tostring()。

savedList.push({ item: newTodo.innerText, isCompleted: false, id: new Date().getTime() });

删除项目，而不是实际从内存数组即savedList或从localStorage中删除项目。我们要做的就是获取taskId，从savedList中过滤/删除项目，然后用相同的键替换localStorage中的项目。但是在页面刷新加载每个todoItems时，您将新日期设置为每个todoItems的值，但这应该是本地存储本身的值。

let itemId = { id: new Date().getTime() };

删除条目美国也有类似的问题。在这里，你试图找到点击项目从数组使用文本，而不是我们可以使用id本身。

for (let i = 0; i < savedList.length; i++) {
if (savedList[i].item === clickListItem.innerText) {
savedList[i].isCompleted = !savedList[i].isCompleted;
localStorage.setItem('todo', JSON.stringify(savedList));
}
}

解决方案:https://codepen.io/renishb10/project/editor/ANyqqo

如果你有任何问题请告诉我。

在Renish的帮助下，我修改了以下内容并将其发布在这里，以便它可以帮助其他人。

// Save to storage 
savedList.push({ item: newItem, isCompleted: false, id: new Date().getTime().toString() });
localStorage.setItem('todo', JSON.stringify(savedList));

将new Date()更改为字符串。正如Renish和cfinn指出的那样，我的.id不匹配。将newTodo更改为newItem，绕过我的innerText按钮。

// Pull from Storage
newButton.innerText = 'Remove';
newButton.setAttribute('id', savedList[i].id);

修改了我的pull from storage code，以反映新的按钮.id。

function removeFunc(taskId){
splicedList = savedList.filter(l => l.id != taskId)
localStorage.setItem('todo', JSON.stringify(splicedList));
}

使用过滤器来查找要删除的项目，基于.id。Github的完整修改代码:https://github.com/BreadsticksN7/collections/blob/20b679fc704d05af5576faa3963f676c0bd2665e/todolist.js

感谢大家的帮助。

相关内容

最新更新

热门标签：