使用JavaScript列出待办事项，并使其即使在刷新后仍保留在浏览器上
使用JavaScript列出待办事项，并使其即使在刷新后仍保留在浏览器上,javascript,Javascript,我用JavaScript构建了一个Todolist，它工作正常，但我希望我的Todo项目保留在浏览器上，即使我刷新它，直到我删除它。我能做什么？有两种方法
常见的方法是：启动并运行后端服务，然后将其存储在数据库中，以便随时从任何设备获取
仅浏览器的方法-如果您正在寻找一种足够简单的方法，则可以使用localStorage API并实现localStorage.setItem（）、localStorage.getItem（）和localStorage.removeItem（）方法，以便在用户计算机
我用JavaScript构建了一个Todolist，它工作正常，但我希望我的Todo项目保留在浏览器上，即使我刷新它，直到我删除它。我能做什么？有两种方法
常见的方法是：启动并运行后端服务，然后将其存储在数据库中，以便随时从任何设备获取
仅浏览器的方法-如果您正在寻找一种足够简单的方法，则可以使用localStorage API并实现localStorage.setItem（）、localStorage.getItem（）和localStorage.removeItem（）方法，以便在用户计算机上本地保存TODO。请注意，此数据可由用户清除
要了解有关何时清除localStorage的更多信息，请参阅此解决方案。此解决方案使用localStorage跨浏览器重新加载来保存数据
请参阅代码中的注释以获取指导，特别是有关在JavaScript中跟踪数据状态的说明，以及将该状态与UI和持久（存储）数据同步的说明
限制：
- 此演示中的“ToDo”项只有一个属性“description”
- UI仅允许添加项目（通过键入说明和选项卡）
或从输入中单击）
- 代码在Chrome中正确运行，但由于沙箱的原因，代码未在堆栈溢出代码段中运行
待办事项
//命名HTML元素，在输入更改时调用'makeAndAddNewItem'
常数
newItemInput=document.getElementById（“newitem”），
listDiv=document.getElementById（“列表”）；
newItemInput.addEventListener（“更改”，makeAndAddNewItem）；
//'tempList'是一个数组，包含所有列表项，
//作为数据状态的真实来源。
//当它改变时，我们应该更新页面和存储的列表
//
//在页面加载时，我们从存储器中检索数据并更新页面
const templast=getListFromStorage（）；
showListOnPage（圣殿骑士）；
在页面加载时调用函数getListFromStorage（）{//
//获取storedList（如果有），将其转换为数组
//并返回数组（或返回空数组）
const storedList=localStorage.getItem（“列表”）；
const list=storedList？JSON.parse（storedList）：[]；
退货清单；
}
函数showListOnPage（templast）{//在页面加载时调用
//循环遍历tempList数组并将每个项添加到页面中
对于（让圣堂武士的当前项）{
showItemOnPage（当前项）；
}
}
函数showItemOnPage（item）{//用于加载和新项目
//向listDiv追加一个新的'p'元素，其内容
//是项的“description”属性的值
允许
descriptionNode=document.createTextNode（item.description），
new段落=document.createElement（“p”）；
new段落.appendChild（descriptionNode）；
listDiv.appendChild（新段落）；
}
函数makeAndAddNewItem（事件）{//eventListener用于新项目
//生成一个'newItem'对象，其'description'属性
//来自'newItemInput'元素的值
//将新项目添加到页面和模板列表中
//使用新更改的模板列表替换存储的列表
const newItem={}；
newItem.description=newItemInput.value；
newItemInput.value=”“；//清除输入
templast.push（newItem）；//更新列表
showItemOnPage（newItem）；//更新页面
updateLocalStorage（tempList）；//更新存储
}
模板列表更改时调用函数updateLocalStorage（）{//
//将模板列表（数组）转换为字符串以更新localStorage.list
const listToStore=JSON.stringify（templast）；
setItem（“列表”，listToStore）；
}
尝试上载您的代码。无论您的应用程序是否连接到任何数据库，请提供更多详细信息。我们可以使用它：window.addEventListener（“load”，function（））