Сегодня мы займемся локальным хранилищем, а также делегированием событий. Сначала нам даны 3 переменные. addItems, itemsList и items. addItems просто захватывает поле ввода, в котором мы перечисляем блюда, itemsList будет неупорядоченным списком, а items - пустым массивом.
Это что-то вроде чек-листа для блюд, и нам нужно все подключить. Первое, что мы делаем, это слушаем пользователя submit, который затем запускаем addItem. Мы также создадим addItem и журнал консоли для целей отладки. Стоит отметить, что при отправке формы страница перезагружается. Чтобы предотвратить это, нам просто нужно добавить e.preventDefault ().
addItems.addEventListener (‘submit’, addItem)
function addItem (e) {
e.preventDefault ()
}
Теперь нам нужно принять вводимые пользователем данные и сохранить их в переменной с именем текст. Мы можем сделать это, используя this.querySelector для проверки ввода с именем элемент.
Давайте также создадим еще одну переменную под названием item, где она будет содержать текст пользователей и содержит готово со значением false. Это будет действовать как наш флаг, чтобы узнать, проверил ли пользователь ввод.
function addItem (e) {
e.preventDefault ()
const text = this.querySelector (‘[name = item]’)
const item = {
текст
готово: false
}
}
Затем нам нужно вставить элемент в наши элементы массив. Мы также захотим очистить форму после того, как пользователь нажмет ввести или отправить ее. Все, что нам нужно сделать, это добавить this.reset () в конец нашей функции.
function addItem (e) {
e.preventDefault ()
const text = this.querySelector (‘[name = item]’)
const item = {
текст
готово: false
}
items.push (элемент)
this.reset ()
}
Теперь, когда мы можем видеть элементы, помещаемые в массив. Приступим к заполнению списка. Мы создадим для этого функцию, которая будет принимать два аргумента. Plates, который будет пустым массивом и plateList Который будет там, где мы хотим заселить наши тарелки. Мы будем отобразить поверх пластин, что даст нам пластину, и нам также понадобится index в качестве аргумента. Отсюда мы хотим вернуть некоторый html. Мы также хотим прикрепить это к DOM, поэтому перед тем, как мы сопоставили пластины, давайте прикрепим plateList.innerHTML. Наконец, мы захотим использовать метод join после map, так как map вернет массив, а для этого нам понадобится только строка.
функция populateList (plate = [], plateList) {
plate.map ((plate, index) = ›{return`
<li>
‹label for =« »› $ {plate.text) ‹/label›
</li>
`
}). присоединиться («»)
}
Мы также хотим добавить флажок с data-index и ID. Это будет очень полезно позже, когда нам нужно будет проверить и посмотреть, какие поля необходимо поставить. Чтобы узнать, поставил ли пользователь этот флажок или нет, мы можем использовать тернарный оператор. Если plate.done - истинное значение, мы отметим поле отмечено, а если нет, мы оставим это пусто.
функция populateList (plate = [], plateList) {
plate.map ((plate, i) = ›{return`
<li>
‹input type =« checkbox »data-index = $ {index} id =« item $ {index} »$ {plate.done? «Проверено»: «»} / ›
‹label for =« »› $ {plate.text) ‹/label›
</li>
`
}). присоединиться («»)
}
Затем мы возьмем наш populateList и используем его внутри нашей функции addItem. Мы передадим созданный нами объект item, а также предоставленный нам itemsList.
function addItem (e) {
e.preventDefault ()
const text = this.querySelector (‘[name = item]’)
const item = {
текст
готово: false
}
items.push (элемент)
populateList (элемент, список элементов)
this.reset ()
}
Теперь мы можем добавлять элементы в список, но они исчезают при перезагрузке страницы. Чтобы исправить это, мы можем хранить наши элементы в localStorage. В локальном хранилище есть 3 API: getItem, removeItem и setItem. Он принимает два аргумента: пара ключ-значение (но принимает только строки). Чтобы обойти это, мы можем придать нашему объекту items строку. Мы также захотим заполнить список при загрузке страницы, чтобы мы могли выполнять populateList внизу скрипта.
function addItem (e) {
e.preventDefault ()
const text = this.querySelector (‘[name = item]’)
const item = {
текст
готово: false
}
items.push (элемент)
populateList (элемент, список элементов)
localStorage.setItem («элемент», JSON.stringify (элементы))
this.reset ()
}
populateList (items, itemsList)
Но ждать! как мы можем заполнить элементы при загрузке страницы, когда ее еще нет? Мы просто возвращаемся к нашему массиву пустых элементов и анализируем localStorage, когда запрашиваем getItems ИЛИ, если его не существует, мы дадим пустой массив.
const items = JSON.parse (localStorage.getItem (items)) || []
Хорошо, теперь, когда наши элементы остаются на странице, нам все еще нужно иметь возможность переключать, если элемент готов. Мы можем создать для этого функцию. Назовем его toggleDone и передадим событие.
function toggleDone (e) {
console.log (e)
}
Нам нужно будет настроить прослушиватель событий для элементов списка, но его не существует в DOM при загрузке страницы. Это означает, что мы не можем прикреплять прослушиватели событий для вещей, которых еще нет на странице. Что нам нужно сделать, так это поместить событие listener в родительские элементы списка. В этом случае это будет наш UL. Первое, что нам нужно сделать, это проверить, если события target не ' t соответствует вводу. В таком случае мы просто вернемся. Затем давайте поместим наш элемент и индекс в его собственные переменные соответственно. Мы можем использовать каждый набор данных элемента в качестве индекса.
function toggleDone (e) {
const el = e.target
const index = el.dataset.index
console.log (e)
}
itemsList.addEventListener («щелчок», toggleDone)
Почти готово! теперь нам нужно получить доступ к каждому свойству done каждого элемента и отменить его, чтобы выполнить наш эффект переключения. Мы также захотим установить этот элемент в нашем локальном хранилище поэтому, если мы обновим, он запомнит, что было сделано. Не забудьте преобразовать в строку наше значение items.
function toggleDone (e) {
const el = e.target
const index = el.dataset.index
el [индекс] .done =! el [индекс] .done
localStorage.setItem («элементы», JSON.stringify (элементы))
console.log (e)
}
