使用 localStorage 的待办事项列表

Question

我做了一个简单的待办事项清单。但我想让一个列表元素有一个 text-decoration = line-through

当我单击按钮时，列表项将设置为直通样式，即使我刷新页面或在新请求中返回它，它仍将保持直通（我认为需要本地存储） .

我以为我可以使用 javascript 添加一个类，但我找不到如何使用本地存储来做到这一点。

以下是我尝试过的：

HTML：

<ul id="a2">
   <li>Make a ramen</li>
</ul>
<button type="button" id="ka" onclick="laylay()" class="" name="button">A</button>

CSS：

.done {
  text-decoration: line-through;
}

JS：

function laylay() {
var as = document.getElementById("a2");
  as.classList.add("done");
}

Answer 1

如果您想跨会话或请求存储列表的状态并且您没有列表的后端存储（这意味着它全部存储在客户端上，也就是通过浏览器），您将需要使用local storage。

试试这个。

localStorage.setItem('a2', 'done');

然后在页面加载时从本地存储中获取项目并设置所需的类。 localStorage.getItem('a2');

您需要有一个event that fires as soon as the document is ready，它将查看您的本地存储，看看它是否找到了所需的记录，如果找到了，它会更新 CSS 样式。

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

这不是一个非常可扩展的解决方案，但对于您的学习和简单示例来说，它会起作用。

Answer 2

尝试获取元素的 HTML，document.querySelector("#a2").innerHTML;，并将其作为字符串保存在 localStorage 中。而当你需要再次加载时，尝试检查它是否存在于localStorage中，然后字符串将被设置为#a2的innerHTML

Answer 3

你应该有一个对象数组存储在 localstorage 中，看起来像这样：

[
{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
}
})

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

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