Я делаю приложение списка задач, в котором я создаю новый элемент списка, когда пользователь добавляет новую задачу - и каждый элемент списка имеет динамически генерируемую кнопку, где мы можем пометить элемент задачи как выполненный или ожидающий выполнения - мое требованиечто список задач должен сохраняться даже при обновлении веб-страницы.Я использую localstorage для хранения innerHTML неупорядоченного списка - и я успешно могу получить элементы списка с помощью кнопок - но их функциональность по щелчку исчезла, а также состояние гликикона кнопок и текстовое оформление текстатоже пропал.
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";
}
}
Любая помощь приветствуется.