Нужно сделать обновляющийся список дел с использованием localStorage. Я сделала так, и оно работает... почти:
const arr = [];
var ul = document.querySelector('ul');
function newElement() {
var inputValue = document.querySelector('input').value;
if (inputValue.length !== 0) {
arr.push({
text: inputValue,
done: false,
id: Math.random().toString()
});
localStorage.setItem('taskslist', JSON.stringify(arr));
}
var li = document.createElement('li');
li.classList.add("list__item");
var getId = li.getAttribute('id');
li.appendChild(
document.createTextNode(inputValue)
);
document.querySelector('ul').appendChild(li);
document.querySelector('input').value = "";
};
function todosRender () {
var raw = localStorage.getItem('taskslist');
var todos = JSON.parse(raw);
if (todos) {
for (todo of todos) {
var li = document.createElement('li');
li.classList.add("list__item");
li.appendChild(
document.createTextNode(todo.text)
);
li.setAttribute('id', todo.id);
document.querySelector('ul').appendChild(li);
li.addEventListener('click', () => {
li.getAttribute('id') == todo.id ? (li.classList.add('list__item_done'), todo.done = true): console.log('error');
});
}
}
};
window.addEventListener('storage', ({ url, key, newValue: value }) => {
console.log(`Key '${key}' changed value to '${value}' from '${url}'`);
arr.push(value);
todosRender();
});
В результате получилось, что значение в localStorage с false на true не меняется, хотя стили применяются, но только к одному элементу. Уже три часа сижу, копаю, не могу понять где же ошибка(
Помогите найти ошибку, а дальше я уже сама буду пытаться разобраться
