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

我正在制作一个todo列表应用程序，当用户添加一个新任务时，我正在创建一个新的列表项，每个列表项都带有一个动态生成的按钮，我们可以在其中标记todo项已完成或挂起。我的要求是，即使网页刷新，todo列表也应该保留。我正在使用localstorage存储无序列表的innerHTML，并且我能够成功地用按钮检索列表项，但是它们的onclick功能消失了，按钮的glyphicon状态和文本的文本装饰也消失了

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";
    }
}

---

感谢您的任何帮助。

如果我理解正确

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

---

在es6中，sessionStorage

可以使用$（document）.on（'click'，…）来动态添加元素。我知道我可以使用jquery…但是如何保存和检索我正在生成的动态按钮的onclick行为…为了简单起见，我更喜欢香草JS。公平点-你可以通过document.addEventListener实现同样的功能。例如：document.addEventListener（'click'，函数（e）{console.log（“Hello world”）；}）都做同样的事情…但是本地会话数据在被显式删除之前一直存在…我正在寻找代码片段来做同样的事情