Javascript 使用localStorage的待办事项列表

我已经列出了一个简单的待办事项清单。但是我想让一个列表元素有一个文本装饰=行通过

当我单击按钮时，列表项将被设置为一行，并且即使我刷新页面或在新请求中返回页面（我认为需要本地存储），列表项仍将保持一行

我想我可以用javascript添加一个类，但我找不到如何用本地存储来实现这一点

以下是我尝试过的：

HTML:

JS:

---

尝试获取元素

document.querySelector（“#a2”）.innerHTML的HTML，并将其保存为localStorage中的字符串。当您需要再次加载它时，请尝试检查它是否存在于localStorage中，如果您希望跨会话或请求存储列表的状态，并且列表没有后端存储（意味着它都通过浏览器存储在客户机上），则该字符串将设为
#a2
的innerHTML您将需要使用

试试这个

localStorage.setItem（'a2'，'done'）

然后，当页面加载时，从本地存储获取项目并设置所需的类。
localStorage.getItem（'a2'）

您需要有一个可以查看本地存储并查看它是否找到了所需的记录，以及它是否更新了CSS样式的工具

window.onload(function() {
 var itemStyle = localStorage.getItem('a2');
 var as = document.getElementById("a2");
 as.classList.add(itemStyle);
}

这不是一个非常可扩展的解决方案，但对于您的学习和简单示例来说，它会起作用
 您应该将对象数组存储在localstorage中，其外观如下所示：

[
{todo:'Do something', complete:false},
{todo:'Do something', complete:false},
]

然后，当您将todo呈现到页面时，您可以根据对象设置todo应有的样式设置条件。
例如

为了存储这类对象，你需要在设置它时对其进行字符串化，而不是在使用它时对其进行解析。你可以用谷歌搜索出如何实现。
如果您使用的是某种框架，那么在页面上以您想要的方式呈现它会容易得多，但可以使用js来完成，因为它只是更长的代码。
例如

你试过什么？我们需要更多详细信息，例如您当前失败的代码。@basic此处我尝试了什么类似的方法，但仍然没有结果，这里是链接到链接，您可以看到如何使用javascript将项目添加到ul中：这是我刚刚做的事情，您可以看到：已经完成了，但当我刷新所有更改时，它不是永久性的这是因为缺少onload处理程序。这是有道理的，但现在元素总是被覆盖。我不需要按这个按钮。当页面加载时，它已被覆盖。我需要按按钮将其覆盖，更改将保存到本地存储正确，它总是覆盖，因为这是当前存储在本地存储中的状态。如果要切换状态，则需要在按钮操作中添加更多代码，以撤消上划线（如果上划线处于当前状态）。根据您的问题，您只需询问如何存储已完成的状态（也称为超行）。这就是它的作用。这并不是一个完整的解决方案，可以收集一个待办事项列表，将该列表存储在本地存储器中，并带有其状态，并用按钮手柄将其标记为完成或未完成。您可以从存储器中删除状态，或更新代码以处理切换。@Kaaleyah我希望这能有所帮助。因为你是新来的，人们试图在回答问题时将答案标记为已接受。
function laylay() {
var as = document.getElementById("a2");
  as.classList.add("done");
}

window.onload(function() {
 var itemStyle = localStorage.getItem('a2');
 var as = document.getElementById("a2");
 as.classList.add(itemStyle);
}

[
{todo:'Do something', complete:false},
{todo:'Do something', complete:false},
]

let todos=localStorage.getItem('todos');
todos.map(item=>{
if(item.complete){
 //code to add this item to page and put .style.textDecoration='line-trough'
}
else{
//code to put item to page
}
})

//Way to get items from localStorage
let todos=JSON.parse(localStorage.getItem("todos") || "[]");
//Way to set item
localStorage.setItem("todos",JSON.stringify(todos));