• Главная
>
• 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>

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