使用vanilla javascript删除本地存储项

我正在用vanilla js编写一个简单的待办事项列表。我已经成功地将输入添加到本地存储中，但无法将样式更改（检查删除）添加到本地存储中，也无法确定如何一次从存储中删除一项。我已经能够清除所有，只是无法单独删除每个项目。下面是我的代码，任何建议都非常感谢

//local storage setup
let saved = window.localStorage.getItem(input.value);

if (saved) {
    list.innerHTML = saved;
}

//handle input submit
function handleSubmitForm(e) {
    e.preventDefault();
    let input = document.querySelector('input');
    if (input.value != '') {
        addTodo(input.value);
    }
    input.value = '';
    window.localStorage.setItem(input.value, list.innerHTML);
}

//check off todo
function checkTodo(e) {
    let item = e.target.parentNode;
    if (item.style.textDecoration == 'line-through') {
        item.style.textDecoration = 'none';
    } else {
        item.style.textDecoration = 'line-through';
    }
    window.localStorage.setItem(item);
}

//delete todo
function deleteTodo(e) {
    let item = e.target.parentNode;
    item.addEventListener('transitionend', function () {
        item.remove();
    });
    item.classList.add('todo-list-item-fall');
    window.localStorage.removeItem(item);
}

---

在localStorage中存储对象是一项棘手的工作

存储在本地或会话存储器中的所有内容都是

string类型的

您可以创建一个对象，如

item = {
  value : ANY_VALUE
}

并使用
JSON.stringify

localStorage.setItem（`item`，JSON.stringify（item））

现在，当您想要更新项目时，只需更新对象，然后再次使用ablove语法进行设置

要从本地存储访问保存的项目，请使用
JSON.parse

yourItemObject = JSON.parse(localStorage.getItem())```

您现在可以使用
yourItemObject.value
访问值。似乎您正在removeItem函数中传递整个
HTML元素（作为对象传递）。您需要传递
键
。

尝试使用localStorage.removietem（item.innerText）
 是一个键值对。只需使用基于字符串的键，就可以轻松地删除、编辑或读取它

//设置待办事项
localStorage.setItem（“todo1”，“上午9:15站立会议”）；
//阅读待办事项
localStorage.getItem（“todo1”）；
//删除待办事项
localStorage.removietem（“todo1”）；

最好将其另存为，因为可以将其标记为已完成而不删除，这样也可以查找已完成的任务

//将todo项保存为JSON字符串
setItem（“todo1”，JSON.stringify（{text:“站立会议9.15am”，completed:false}））；
//读一下
const todo=JSON.parse（localStorage.getItem（“todo1”）；
//你可以读课文
console.log（todo.text）；
//您还可以将其标记为已完成并将其保存回
todo.completed=true；
setItem（“todo1”，JSON.stringify（todo））；
如果您正在使用localStorage中的列表。我将使用以下基本示例：

函数addTodo（键，项）{
var list=getTodo（键）；
列表。推送（项目）；
setItem（key，JSON.stringify（list））；
}
函数getTodo（键）{
试一试{
var rawList=localStorage.getItem（键）；
返回JSON.parse（rawList）| |[]；
}
捕获（e）{
返回[]；
}
}
功能removeTodo（键，id）{
var list=getTodo（键）；
var newlist=list.filter（函数（项）{
return item.id！=id；
});
setItem（key，JSON.stringify（newlist））
}
函数emptyTodo（键）{
localStorage.removietem（键）；
}
addTodo（'列表'{
id:1，
文字：“购物”
});
addTodo（'列表'{
id:2，
课文：“学习”
});
log（getTodo（'list'）；
removeTodo（“列表”，1）；
log（getTodo（'list'））
emptyTodo（“列表”）；
当您设置项时，您要添加一个变量名，然后添加一个值（
localStorage.setItem（“name”、“value”）
），如果您想删除localStorage项，请按名称删除它（
localStorage.removietem（“name”）
）。值应该仍然引用list.innerHTML还是应该以其他方式引用列表项？我似乎仍然无法实现这一点。这是否意味着先将input.value和list.innerHTML分配给变量，然后再引用变量名？@jsdev是的，您可以使用类似于
{value:input.value，html:list.innerHTML}
的结构谢谢，我尝试过，但不幸的是它对我不起作用。