Я пишу приложение для отслеживания дел и пытаюсь использовать куки для создания полупостоянства. Однако, когда страница обновляется, удаленные элементы списка снова появляются и не работают, т.е. не могут быть удалены как обычно и не могут быть вычеркнуты (изменение CSS).
Тег <body> имеет onload = "loadStorage" внутри этого вызова на <ul> с id = "list"
/* load on page load */
function loadStorage() {
document.getElementById("list").innerHTML = document.cookie;
}
Элементы списка создаются так:
function newElement() {
event.preventDefault(); // stop default redirect
var li = document.createElement("li"); // create an <li> element
/* make a text node from the input and put it in the <li> */
var inputValue = document.getElementById("task").value; // retrieve value of text box
var t = document.createTextNode(inputValue); // create a text node of the box value
li.appendChild(t); // put the text node in the single <li>
/* attach a button to the <li> element that deletes it */
var btn = document.createElement("BUTTON"); // Create a <button> element
btn.innerHTML = "X"; // Insert text
btn.className = "button" // add class name for CSS targeting
btn.addEventListener('click', removeItem); // add event listener for item deletion
li.appendChild(btn); // Append <button> to <li>
li.addEventListener('click', checkToggle); // add event listener for a click to toggle a strikethrough
appendItem("list", li); //append the li item to the ul
}
и затем передаются на
function appendItem(id, li) {
event.preventDefault(); // prevent the defualt redirect
document.getElementById(id).appendChild(li); // append the single li element to the ul
document.cookie = document.getElementById(id).innerHTML; // Store
}
Кажется, это работает, потому что при обновлении страницы sh элементы остаются. Обычно функция removeItem(), присоединенная к кнопке в элементе <li>, удаляет элемент, но после добавления следующего он больше не работает при обновлении страницы. Также предполагается сбросить список, сохраненный в cook ie, но, похоже, это не работает.
function removeItem() {
this.parentNode.remove()
document.cookie = ""
document.cookie = document.getElementById("list").innerHTML // Store
}