Задать вопрос
@Chamomile1
начинающий программист frontend
javascript

Как сделать список дел с обновляющимся состоянием в localStorage?

У меня задача сделать список дел с использованием localStorage, которое будет обновляться при добавлении/выполнении задачи. Список дел я сохраняю в массив. Возникли вопросы с обновлением состояния дела (done: true/false) У меня по умолчанию false, а при клике на дело значение в localStorage должно меняться на true, и заодно меняться стили. Но этого не получается, и ошибок не выдает. Код, который не работает: 
if (li.onclick) {
	todo.done = true;
	li.classList.add('list__item_done');
}

Весь код:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel = 'stylesheet' href = 'style.css'>
</head>
<body>
	<script src = 'todo.js'></script>
    <h1 class = "title">ToDo List</h1>
  <div class = "todo-list">
    <div class = "actions">
  <input class = "task-input" type = "text"/>
  <button class = "btn" onclick = "newElement()">Create</button>
    </div>
    <ul class = "list">
    </ul>
  </div>
  <script>
    todosRender();
  </script>
</body>
</html>

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});
  		localStorage.setItem('taskslist', JSON.stringify(arr));
	}

var li = document.createElement('li');
li.classList.add("list__item");
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)
);
document.querySelector('ul').appendChild(li);
if (li.onclick) {
	todo.done = true;
	li.classList.add('list__item_done');
}
	}
 }

};
window.addEventListener('storage', ({ url, key, newValue: value }) => {  
	console.log(`Key '${key}' changed value to '${value}' from '${url}'`);
	arr.push(value);
	todosRender();
});
  • Вопрос задан
  • 361 просмотр
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
Siteyoda
@Siteyoda
frontend-developer
Используй другую валидацию, чтобы проверить пуст ли инпут: вместо 
if (inputValue.length !== 0) {
   		arr.push({text: inputValue, done: false});
  		localStorage.setItem('taskslist', JSON.stringify(arr));
  }


Сделай - 

if (!inputValue.length?.trim()) {
   		arr.push({text: inputValue, done: false});
  		localStorage.setItem('taskslist', JSON.stringify(arr));
  }


Это уберет возможность наставить пробелов и добавить "пустую строку дел"

Также используй id для todo, можешь взять функцию Math.random() и сделай так

if (!inputValue.length?.trim()) {
   		arr.push({
                    text: inputValue, 
                    done: false,
                    id: Math.random().toString(),
                });
  		localStorage.setItem('taskslist', JSON.stringify(arr));
  }


А потом при клике на список дел в ней проверяй списки дел по айди, и если найдется нужный, меняй у него данные, например изменить условие: выполнен или нет и тд.
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создание 3D моделей здания в Autodesk Revit
24 дек. 2024, в 04:04
3000 руб./за проект
Разработать принципиальную схему в Altium Designer
24 дек. 2024, в 03:48
3000 руб./за проект
Написать код для мобильного редактора видео, записываемого с камер
23 дек. 2024, в 23:22
15000 руб./за проект
Ещё заказы