使用 Javascript 中的按钮存储和获取动态创建的列表元素 - 使用 LocalStorage答案

【问题标题】：Storing and Getting Dynamically Created List Elements with Buttons in Javascript - using LocalStorage使用 Javascript 中的按钮存储和获取动态创建的列表元素 - 使用 LocalStorage
【发布时间】：2019-03-19 11:12:09
【问题描述】：

我正在制作一个待办事项列表应用程序，当用户添加新任务时，我正在创建新列表项 - 每个列表项都带有一个动态生成的按钮，我们可以在其中将待办事项标记为已完成或待处理 - 我的要求是即使刷新网页，也应保留待办事项列表。我正在使用 localstorage 存储无序列表的 innerHTML - 我成功地能够使用按钮检索列表项 - 但它们的 onclick 功能已经消失 - 以及按钮的字形图标状态和文本的文本装饰也没有了。

var ul = document.getElementsByClassName("taskList");
var li = document.createElement("li");
li.setAttribute('class','taskListItem');
li.style.textDecoration = 'none';
li.innerHTML = inputValue;
var clearButton = document.createElement("button");
clearButton.setAttribute('class','btn btn-default');
clearButton.style.paddingTop = "5px";
clearButton.style.paddingBottom = "5px";
clearButton.style.cssFloat = "right";
clearButton.onclick = function(){
li.parentNode.removeChild(li); // This functionality is not available when the page is refreshed
}

另外我如何使用 LocalStorage 保存按钮的状态 - 也就是说，如果任务完成 - 我正在更改按钮的字形

checkButton.onclick = function(){
console.log("li style decoration = "+li.style.textDecoration);
if(li.style.textDecoration == "none"){
    li.style.textDecoration = "line-through";
    var checkSpanLocal = checkButton.childNodes[0];
    checkSpanLocal.className = "glyphicon glyphicon-minus";
    }
}

感谢任何类型的帮助。

【问题讨论】：

您可以使用 $(document).on('click',.....) 动态添加元素。 api.jquery.com/on
我知道我可以使用 jquery....但是如何保存和检索我正在生成的动态按钮的 onclick 行为...为了简单起见，我更喜欢 Vanilla JS。
公平点 - 您可以通过 document.addEventListener 实现相同的目标。例如：document.addEventListener('click',function(e){ console.log("Hello world"); })

标签： javascript html twitter-bootstrap local-storage buttonclick

【解决方案1】：

如果我理解正确的话，

您希望即使在刷新后也保留这些值，因此您最好尝试使用会话存储而不是本地存储。本地存储意味着仅为会话存储值，一旦刷新它就会丢失。

在 es6 中，会话存储

【讨论】：

两者都做同样的事情......但是 LocalSession 数据在明确删除之前一直存在......我正在寻找代码 sn-p 来做同样的事情