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

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

的innerHTML。

Answer 2

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

尝试一下。

$(function(){ $('#mymodal').on('show.bs.modal', function(){ var myModal = $(this); clearTimeout(myModal.data('hideInterval')); $('.modal-content', myModal).on('mouseover', function() { clearTimeout(myModal.data('hideInterval')); }); $('.modal-content', myModal).on('mouseout', function() { myModal.data('hideInterval', setTimeout(function(){ myModal.modal('hide'); }, 3000)); }); myModal.data('hideInterval', setTimeout(function(){ myModal.modal('hide'); }, 3000)); }); });

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

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

localStorage.getItem('a2')

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

Answer 3

您应该在本地存储中存储对象数组，如下所示：

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

为了存储这种对象，您需要在设置对象时对其进行字符串化，而不是在使用时对其进行解析。您可以在Google上搜索操作方法。如果您使用某种框架，将其以所需的方式呈现在页面上会更加容易，但是使用js可以完成，这只是更长的代码。例如

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

使用localStorage的待办事项列表

3 个答案: