Cохраняем данные в форме при обновлении страницы (JavaScript)

👇 Разверни для полной информации

🇺🇦 Канал Українською :


Вводим данные у форму, обновляем страницу и данные пропали. Пишем на javascript код, который сохраняет данные в форме при обновлении страниц

00:00 Вступление
01:50 Создаем форму в HTML
06:10 Переходим к JavaScript
07:40 Получаем данные из input, делегирование
11:26 Проверяем запись в localStorage
12:27 Восстанавливаем данные в форму
16:47 Добавляем select в форму
17:35 Добавляем radio buttons в форму
18:12 Сheckbox и доработка кода
22:46 Добавляем DomContentLoaded

Моя рабочая станция:
Desktop: AMD Ryzen5 1600,Asus GeForce GTX 1650 Phoenix 4GB GDDR6, RAM: 16GB, Motheboard: MSI A320M PRO-M2 V2, Power: Chieftec Value APB-400B8 400W Bulk, Box: Gougar MX350 Mesh
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB

Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D

Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro

+ MacBook Pro M1 13'' 8-Core CPU/8-Core GPU/16-core Neural Engine /16GB/256GB
+ IBM Lenovo ThinkPad E14 / Intel Core i5-1135G7 (4.2 ГГц) / RAM 16 ГБ / SSD 1 ТБ / Intel Iris Xe Graphics

[serdar]

Александр Привет. Ну Слава Богу вы обьявились !! Надеюсь у вас и ваших близких все хорошо. В такое тяжелое время Желаю вам скорейшего окончания войны и Мирного неба над головой

[xwonrwi]

Спасибо, что не вводите санкции против русского языка.) Ваши курсы очень нужны и полезны. Надеюсь, всё будет хорошо, и у вас и у нас.

[svetlanapokrovskaya]

Александр, спасибо Вам за то, что вернулись. Проходила у вас курсы (react, методы массивов и функции). Постоянно заглядывала на ваш канал, очень переживала. Мира.

[yakut]

Александр, с возвращением! Слава богу с Вами ничего не произошло. Сил вам и терпения. Вам и Вашим близким. Всем мир.

[GrandAlexandr]

Я очень ждал новые видео, спасибо Александр за работу

[ihopeingod]

Александр, спасибо, что вы вернулись! Слава Богу, что вы живы и здоровы. Продолжайте ваш труд. Вы нам очень нужны.

[svhanz]

Бесконечно долго можно смотреть на то, как горит огонь, как течет вода и как Александр показывает и рассказывает всякие премудрости!
Классный ролик! Спасибо

[oleksandrsmyrnov]

Спасибо Вам большое за ваш труд, Александр.
Вы как феникс возродились с новыми идеями и вдохновлением на учебу и работу, в первую очередь над собой

[dsrmdim]

Дякую, Олександр, за уроки. Щось купую, щось дивлюся тут (як немає можливості придбати). Дуже доступно все пояснюєте - respect особисто)))

[romanr]

Один из лучших каналов в тематике JS! Желаю вам и вашим близким всего самого лучшего! Спасибо за труд!

[jinke]

Уроки по JS - самая лучшая терапия для мозгов на сегодня. Спасибо Вам!

[deniskotov]

Я так рад, что вы вернулись, Александр! У вас самые лучшие курсы по JavaScript в этой части Галактики!

[quziugr]

Берегите себя пожалуйста, в первую очередь для себя и близких, а потом уже для нас🙏 Очень не хватает данного формата видео, очень классно и актуально, спасибо

[VIJana]

Александр, спасибо большое за полезное видео, как раз начала изучать работу с формами в JS и тут ваше видео в рекомендациях!!!

[HelloHovo]

Как я рад Вашему возвращению . Мира вашей страны из Армении

[fsyrykn]

Запоминание чекбоксов работает некорректно:
Мы в массив formData добавляем value каждого элемента формы (в том числе checkbox'а), а у checkbox value всегда 'on' (можете вывести в консоль и глянуть).
Поэтому если сделать чекбокс активным и после неактивным - в LS всё равно останется "on". Получается если мы хоть раз нажали на чекбокс - своё решение мы поменять не можем:((
Решение:
При добавлении значений в formData сделать проверку на чекбокс и добавлять ключом checked для чекбокса
if (e.target.type === "checkbox") {
formData[e.target.name] = e.target.checked
} else {
formData[e.target.name] = e.target.value
}
А при взятии из LS проверять просто на значение ключа (ведь оно true или false)
if (form.elements[key].type === "checkbox" && formData[key]) {
form.elements[key].checked = true
} else {
form.elements[key].value = formData[key]
}

[sadivnytsia]

Дякую! Ви за 20 хвилин стисло та зрозумило пояснили. Трохи відвліклась від читання новин по війні. Тепер зможу полагодити свій код, зробити його зручнище.

[lesyav]

Велике дякую за відео! Ви допомогли мені виконати домашку!🥰🥰🥰

[КрасивыеМыслииСлова]

огромная благодарность за урок.. материал очень доступно изъяснён, спасибо!

[ai-bloggers]

Здравствуйте, Александр. С возвращением.