使用localStorage的待办事项列表

时间:2019-01-07 21:02:22

标签: javascript html css

我做了一个简单的待办事项清单。但我想使列表元素具有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");
}

3 个答案:

答案 0 :(得分:0)

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

的innerHTML。

答案 1 :(得分:0)

如果您想在会话或请求中存储列表的状态,并且没有该列表的后端存储(意味着它全部通过浏览器存储在客户端上),则需要使用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')

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

答案 2 :(得分:0)

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

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