Пошук уроків, статей та іншого контенту
Обробка відправки форми через JavaScript та збереження даних у браузері між перезавантаженнями сторінки.
Типова поведінка HTML-форми — перезавантажити сторінку при натисканні submit і надіслати дані на сервер повним перезавантаженням. Для сучасних інтерактивних застосунків зазвичай потрібно обробити дані в JavaScript без перезавантаження — наприклад, показати помилку валідації одразу або надіслати дані через fetch (модуль «Асинхронний JavaScript»).
const form = document.querySelector("#login-form");
form.addEventListener("submit", (event) => {
event.preventDefault(); // зупиняє типове перезавантаження сторінки
console.log("Форма надіслана, обробляємо самостійно");
});form.addEventListener("submit", (event) => {
event.preventDefault();
const email = form.querySelector("#email").value;
const password = form.querySelector("#password").value;
console.log(email, password);
});Коли полів багато, звертатись до кожного окремо незручно — FormData автоматично збирає всі поля форми за їхніми атрибутами name:
<form id="signup-form">
<input name="email" type="email" />
<input name="password" type="password" />
</form>form.addEventListener("submit", (event) => {
event.preventDefault();
const data = new FormData(form);
const values = Object.fromEntries(data); // перетворює на звичайний об'єкт
console.log(values); // { email: "...", password: "..." }
});Змінні JavaScript зникають при перезавантаженні сторінки. Коли потрібно зберегти щось між відвідуваннями (тема оформлення, чернетка форми, список завдань без бекенду), браузер надає вбудоване сховище ключ-значення — саме те, чим користується практична частина проєкту «Todo-застосунок», доступного в розділі «Практика» цього сайту.
localStorage.setItem("theme", "dark");
localStorage.getItem("theme"); // "dark"
localStorage.removeItem("theme");
localStorage.clear(); // видалити всеlocalStorage зберігає лише рядки. Щоб зберегти об'єкт чи масив, серіалізуйте його через JSON.stringify перед записом і розберіть через JSON.parse при читанні:
const tasks = [{ id: 1, text: "Купити хліб", done: false }];
localStorage.setItem("tasks", JSON.stringify(tasks));
const saved = JSON.parse(localStorage.getItem("tasks") ?? "[]");
saved; // [{ id: 1, text: "Купити хліб", done: false }]Той самий API (setItem/getItem/removeItem/clear), але дані зникають, щойно вкладку закрито — на відміну від localStorage, який зберігається навіть після закриття браузера. Підходить для тимчасових даних у межах однієї сесії роботи, наприклад кроку багатоетапної форми.
sessionStorage.setItem("wizardStep", "2");const draftInput = document.querySelector("#comment");
// Відновити чернетку при завантаженні сторінки
draftInput.value = localStorage.getItem("commentDraft") ?? "";
// Зберігати чернетку при кожній зміні
draftInput.addEventListener("input", () => {
localStorage.setItem("commentDraft", draftInput.value);
});Забутий preventDefault — сторінка перезавантажується, і JavaScript-обробник ніби «не спрацьовує».
Спроба зберегти об'єкт напряму без JSON.stringify — localStorage збереже рядок "[object Object]", а не дані.
Плутанина localStorage і sessionStorage — перше зберігається довго, друге зникає із закриттям вкладки.
Зберігання чутливих даних (паролі, токени) у localStorage — він доступний будь-якому JavaScript-коду на сторінці, включно з потенційно шкідливим, і не призначений для секретів.
preventDefault на submit дозволяє обробити форму в JavaScript замість перезавантаження сторінки; FormData спрощує збір усіх полів одразу. localStorage і sessionStorage — вбудовані сховища ключ-значення для збереження даних у браузері, з однаковим API, але різним часом життя даних; обидва працюють лише з рядками, тому об'єкти потрібно серіалізувати через JSON.
Спробуйте самостійно
Створіть перемикач теми (кнопка, що додає/прибирає клас "dark" на document.body через classList.toggle), і збережіть вибір у localStorage, щоб тема відновлювалась при перезавантаженні сторінки.