Как запомнить и восстановить данные в форме на jQuery
В мире веб-разработки мы часто сталкиваемся с задачей сохранения и восстановления данных формы. Будь то создание интерфейса, который помнит предыдущее состояние пользователя после обновления страницы, или даже сложное решение, связанное с управлением сеансами.
Сохранение данных формы
Есть различные способы сохранить данные формы на стороне клиента. Один из самых распространенных - использование Web Storage API, который предоставляет доступ к локальному хранилищу (localStorage) для сохранения данных на устройстве пользователя.

Отмечу, что это лишь один из способов решить эту задачу, и он успешно справляется с большинством стандартных элементов формы.
В этой статье я покажу вам, как мы можем использовать localStorage совместно с jQuery для сохранения и восстановления данных формы.
Пример использования jQuery для управления данными формы
Используя jQuery, мы можем получить доступ ко всем полям формы - будь то текстовые поля, выбор (радио и флажки), текстовые области или выпадающие списки - и сохранить их значения в localStorage.
// Запоминаем
function remember(form) {
let inpAct = [];
let textAct = [];
let selAct = [];
$(form).find('input,textarea,select').each(function() {
if (this.nodeName === 'INPUT') {
if (['button', 'submit', 'text', 'email', 'number', 'date', 'month', 'range', 'tel', 'search', 'week', 'datetime-local', 'time', 'color', 'url'].includes(this.type)) {
inpAct.push(this.value);
} else if ((this.type == 'radio') || (this.type == 'checkbox')) {
inpAct.push(this.checked ? 1 : 0);
} else {
inpAct.push("");
}
} else if (this.nodeName === 'TEXTAREA') {
textAct.push(this.value);
} else if (this.nodeName === 'SELECT') {
selAct.push(this.value);
}
});
localStorage.setItem('inpAct', JSON.stringify(inpAct));
localStorage.setItem('textAct', JSON.stringify(textAct));
localStorage.setItem('selAct', JSON.stringify(selAct));
alert("Введенные вами данные сохранены");
}
В этой функции мы проходимся по каждому элементу формы с использованием метода each() jQuery. Мы сохраняем значения текстовых полей, радио-кнопок, текстовых областей и выпадающих списков в соответствующие массивы, которые затем хранятся в localStorage.
Восстановление данных формы
Теперь, когда данные сохранены, мы можем восстановить их позже, когда пользователь вернется на страницу. В этом нам помогает функция recollect().
// Вспоминаем
function recollect(form) {
if (localStorage.getItem('inpAct')) {
let inpAct = JSON.parse(localStorage.getItem('inpAct'));
let textAct = JSON.parse(localStorage.getItem("textAct"));
let selAct = JSON.parse(localStorage.getItem('selAct'));
let inpIndex = 0;
let textIndex = 0;
let selIndex = 0;
$(form).find('input,textarea,select').each(function() {
if (this.nodeName === 'INPUT') {
if ((this.type == 'radio') || (this.type == 'checkbox')) {
this.checked = inpAct[inpIndex++] ? true : false;
} else {
this.value = inpAct[inpIndex++] || "";
}
} else if (this.nodeName === 'TEXTAREA') {
this.value = textAct[textIndex++] || "";
} else if (this.nodeName === 'SELECT') {
this.value = selAct[selIndex++] || "";
}
});
}
}
recollect($('#myform'));
Эта функция получает данные из localStorage, проходит через каждый элемент формы, как и функция remember(), и восстанавливает значения элементов формы.
Используя эти две функции совместно, мы можем легко сохранять и восстанавливать данные формы, помогая создать более удобный для пользователя и надежный интерфейс.
Пример простой формы.
<form id="myform">
<label for="name">Ваше имя:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Ваш email:</label><br>
<input type="text" id="email" name="email"><br>
<label for="message">Ваше сообщение:</label><br>
<textarea id="message" name="message"></textarea><br>
<select class="form-control garlic-auto-save">
<option selected="selected">Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select><br><br>
<input type="submit" value="Отправить"><br>
<input type="button" onclick="remember(document.getElementById('myform'))" value="Запомнить" />
</form>
В заключение, хотел бы отметить, что управление данными формы - это фундаментальная часть построения интерактивных веб-приложений. Применяя такие методы, как показано выше, мы можем значительно улучшить пользовательский опыт и надежность наших приложений.