Javascript 在本地存储中保存TODO

我已经创建了一个todo应用程序，我想将todo保存在

localStorage

中

我想添加

localStorage

属性，如下所示：

addForm.addEventListener("submit", (e) => {
    e.preventDefault();
    let todo = addForm.add.value.trim();
    if (todo.length) {
        localStorage.setItem(todo);
        generateTemplate(todo);
        addForm.reset();
    }
}

但是，它不起作用

因此，我的问题是，在代码的哪一部分添加属性是最佳实践，在哪一部分添加

getItem

方法也是最佳实践

---

以下是不带

localStorage

属性的完整代码：

const addForm=document.querySelector（“.add”）；
const list=document.querySelector（“.todos”）；
const search=document.querySelector（“.search输入”）；
//生成新的待办事项
const generateTemplate=（todo）=>{
让html=`

${todo}
`；
list.innerHTML+=html；
};
//提交待办事项
addForm.addEventListener（“提交”，（e）=>{
e、 预防默认值（）；
让todo=addForm.add.value.trim（）；
if（todo.长度）{
生成模板（todo）；
addForm.reset（）；
}
});
//删除待办事项
list.addEventListener（“单击”，（e）=>{
if（例如target.classList.contains（“删除”））{
e、 target.parentElement.remove（）；
}
});
//过滤待办事项
常数filterTodos=（项）=>{
Array.from（list.children）
.filter（（todo）=>！todo.textContent.toLowerCase（）.includes（术语））
.forEach（（todo）=>todo.classList.add（“过滤”）；
Array.from（list.children）
.filter（（todo）=>todo.textContent.toLowerCase（）.includes（术语））
.forEach（（todo）=>todo.classList.remove（“过滤”）；
};
search.addEventListener（“keyup”，（）=>{
const term=search.value.trim（）.toLowerCase（）；
滤嘴（术语）；
});
正文{
背景色：Š352f5b；
}
.集装箱{
最大宽度：400px；
}
输入[type=“text”]，
输入[type=“text”]：焦点{
颜色：#fff；
边界：无；
背景：rgba（0,0,0,0.2）；
最大宽度：400px；
}
李先生{
背景：#423a6f；
}
.删除{
光标：指针；
}
.过滤{
显示：无！重要；
}

托多利斯特
斯托多

添加新待办事项。。。
Storages对象（与LocalStorage一起使用）允许保存字符串（具体来说是DOMStrings），因此如果要保存javascript对象，应首先将其转换为字符串（例如使用）

在您的代码中，
setItem
的语法也不正确。您需要指定

localStorage.setItem（'todo'，todo）；

请注意，这将只保存一个todo。因此，当返回todo时，您需要执行
localStorage.getItem（'todo'）
，这当然只会返回您保存的最后一个todo

解决方案可能是为您的TODO设置存储：

var todos=[]

每次创建新todo时，都会将该todo添加到此对象

todo.push（todo）

并将其保存到本地存储

localStorage.setItem（'todos'，JSON.stringify（todos））

返回该列表时，需要返回字符串以获取实际对象：

var-todostring=localStorage.getItem（'todos'）；
var todos=JSON.parse（todoString）；

考虑到这只会将todos数据放入该变量中，然后需要重新填充dom。
这可以通过重用
generateTemplate
函数来实现。
例如

todos.forEach（todo=>generateTemplate（todo））；

我还建议您查看一下LocalStorage的MDN页面：

使用Web存储API页面作为一个完整的工作示例：
非常感谢您抽出时间，我真的理解了这一点。但是仍然存在一个问题，每次我刷新页面时，我都会丢失列表的所有信息，这是因为您需要从存储中读取列表并在重新加载时构建列表。（本地）存储只保存数据，它对你的应用一无所知。您应该有一些从本地存储读取的代码，并在答案末尾添加扩展的todosI