ToDo лист на LocalStorage и jQuery с возможностью редактирования задач

Здравствуйте, коллеги. Чуть ниже представлен алгоритм написания ToDo листа на jQuery с использованием локального хранилища LocalStorage + возможность редактирования и удаления каждой отдельной задачи из списка. В результате получиться должно следующее —  демо. За код прошу строго не судить, т.к. в JS я только начинаю. Однако дельным советам я буду только рад.

Поехали.

Для начала создадим разметку. Стоит заметить, что разметка здесь будет минимальной, т.к. основные действия по добавлению, редактированию и удалению элементов ToDo листа будут происходить динамически.

Классам не удивляйтесь. Я считаю, что для шустрой верстки bootstrap — это то, что нужно. Стили я отображать в статье не буду, т.к. они здесь не главное. Если будет желание — посмотрите в демо примере.

Справочно. LocalStorage имеет всего 5 методов:
.key() — принимает в качестве параметра индекс ключа, по которому можно вытащить его имя. Как и в массиве нумерация начинается с нуля.
.getItem() — метод, принимающий в качестве параметра имя ключа и возвращающий из LocalStorage его значение.
.setItem() — метод, позволяющий записать в LocalStorage пару «ключ — значение». Принимает два параметра, соответственно («ключ — значение»).
.removeItem() — удаляет пару «ключ — значение» из LocalStorage. Принимает в качестве параметра только имя ключа, по которому и удаляет пару.
.clear() — очищает весь LocalStorage. Параметров не имеет.

Так же имеется единственное свойство .length, которое возвращает количество записанных элементов.

В меру своих умственных способностей теперь я постараюсь расписать логику работы скрипта и пойду от общего к частному:
1) Нам нужно первым делом перехватить содержимое поля ввода и записать его в LocalStorage и вывести в список <ul> на странице.
2) Затем при обновлении страницы из LocalStorage достать записанные задачи и через цикл их перезаписать в этот список, т.к. после обновления список будет пустой.
3) Далее мы напишем функционал удаления и редактирования отдельной таски. Здесь как раз может возникнуть затык, т.к. ключи, по которым мы будем добавлять значения в LocalStorage после удаления элемента из середины списка собьются с начнут друг друга перезаписывать, но об этом чуть дальше.

Весь JS-код выглядит следующим образом:

Теперь постараюсь пояснить каждый логически законченный блок кода.

1) Выводим элементы из LocalStorage на страницу после ее обновления

В переменную мы записываем длину LocalStorage, объявляем localValue, которую будем использовать в качестве значения ключа и объявляем newId равную 0. На последнюю переменную нужно обратить отдельное внимание, т.к. с помощью нее будут записываться ключи и она же будет составной частью data-атрибута элемента списка в DOM, по которому мы будет сопоставлять данный элемент в разметке и соответствующую ему пару «ключ — значение» в локальном хранилище.
Далее объявляем функцию getValueAfterReload() и после её инициализируем. Данная функция при открытии / рефреше страницы будет добавлять в DOM ранее записанные в локальное хранилище данные.

2) Добавляем новый элемент в список и в локальное хранилище.

Вынимаем из input записанное значение: в переменную task записываем value инпута по нажатию на Enter (keyCode данной клавиши — 13). После чего нам нужно установить id-шник новому элементу, который должен быть всегда на единицу больше предыдущего элемента. Это делается для того, чтобы после удаления некоторых элементов из списка ключ нового добавленного не перезаписал ключи имеющихся элементов. После чего мы можем добавить этот элемент непосредственно в DOM и в локальное хранилище, очистив напоследок поле ввода.

3) Добавляем по hover’у на элементы меню редактирования / удаления и заставляем это меню к тому же еще и работать)

Данное действие скорее факультативное и сделано больше для расширения функциональности ToDo листа. Можно легко обойтись и без него, удаляя элементы по клику. Однако я захотел сделать такое 🙂
Здесь все будет по проще. По событию mouseenter отображаем меню с кнопками, по событию mouseleave это меню удаляем. По клику на кнопку «удалить» происходит удаление элемента из DOM и удаление его из хранилища с помощью метода .removeItem(), о котором я писал в начале статьи. Редактирование элемента происходит следующим образом: мы записываем введенное значение в переменную, добавляем input, в который кладем ранее сохраненное в переменной значение и редактируем. После нажатия на кнопку «сохранить» мы перезаписываем значение и обновляем его в LocalStorage. В случае если мы передумали редактировать таску, нажимаем на «cancel» и оставляем текущее значение.

4) Заключительный штрих — очищаем список и локальное хранилище по нажатию на кнопку «Очистить список».

Ловим клик по кнопке, удаляем все .item, очищаем LocalStorage и обнуляем newId.

На этом пока все. Результат работы скрипта вы можете посмотреть на  демо-странице.
Надеюсь, данная статья вас натолкнула на определенные мысли по реализации ToDo листа с помощью LocalStorage и непотопляемого jQuery 🙂