我做了一个简单的待办事项清单。但我想使列表元素具有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");
}
答案 0 :(得分:0)
尝试获取元素document.querySelector("#a2").innerHTML;
的HTML,并将其另存为字符串在localStorage中。并且当您需要再次加载它时,请尝试检查它是否存在于localStorage中,然后该字符串将被设置为#a2
答案 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));