Как сохранить toggle class, цвет элемента li

316

03 мая 2018, 08:43

Есть список ul li, который хранит в себе данные вписанные пользователем в формы. Данные добавляются в li и в localStorage объект(данные не пропадают при обновлении) если кликнуть на элемент списка, то цвет станет зеленым, класс checked. Это небольшой todolist. Так вот как сохранить этот toggle класс? Чтобы пользователь мог осуществить refresh страницы, а цвет выделенных пунктов оставался выделенным и не обновлялся. Решение данной проблемы есть в интернете, но либо на Jquery, либо непонятными мне способами. Как сохранить состояние(класс)? Какую технологию использовать? Тот же JSON либо Cookie. Помогите мне пожалуйста, очень долго ломаю голову над данной проблемой.

html
____
<ul>
   <li>one item</li>
   <li>two item</li>
   <li>three item</li>
</ul>
js
____
var li = document.getElementsByTagName('li');
for(var i = 0; i < li.length; i++) {
    li[i].onclick = function(ev) {
       ev.target.classList.toggle('checked');
    }
}
css
____
.checked {color: green;}

Answer 1

Xм, Вы же сохраняете объекты в localStorage (где, кстати, этот код?). Сохраняйте объекты со свойством checked и восстанавливайте class, ориентируясь на это свойство.

Храните в массиве не строки, а объекты в таком виде:

var data = {
  todo: [
    {
      text: "Buy groceries",
      done: true
    },
    {
      text: "Wash dishes",
      done: true
    },
    {
      text: "Do homework",
      done: false
    }
  ],
  ...
};
...
if (item.done)
  element.classList.add("checked");