Хранение и получение динамически созданных элементов списка с кнопками в Javascript - используя LocalStorage - PullRequest
0 голосов
/ 15 октября 2018

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

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 15 октября 2018

Если я правильно понял,

Вы хотите сохранить значения даже после обновления, поэтому вы можете предпочтительно попробовать использовать хранилище сеансов вместо локального хранилища.Локальное хранилище предназначено для хранения значений только для сеанса, и после обновления оно будет потеряно.

в es6, sessionStorage

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...