Сохранение данных формы в Local Storage с помощью jQuery

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

Для того чтобы избежать подобных ситуаций в будущем, я предлагаю простое решение. Хотя данные можно сразу отправить в базу данных, не всегда это необходимо или целесообразно. В этой статье мы сосредоточимся на использовании "Local Storage".

Как следует из названия, "Local Storage" позволяет хранить данные локально в браузере пользователя. Это не только облегчает восстановление данных в случае ошибки, но и дает возможность пользователю сделать паузу и продолжить позже.

В данном руководстве мы будем работать с браузером Mozilla Firefox, однако сохранение данных также возможно в любом современном браузере.

В Firefox можно легко просмотреть содержимое "Local Storage". Для этого нужно перейти в раздел "Дополнительные инструменты" -> "Инструменты для веб-разработчиков". Вкладка "Веб-Хранилище" содержит пункт "Local Storage".

01. Сохранение данных

Функция срабатывает при каждом вводе и сохраняет данные в формате JSON, состоящем из ID и введенного значения. ID необходим для последующего связывания значений с соответствующими полями ввода. С помощью селектора ":input" учитываются все поля ввода, также существует возможность точно указать, какие именно поля следует сохранять. Используя метод ".each", мы проходим по всем полям и сохраняем данные в наш JSON.

$(':input').on('input', function() {
	var formname = "demo-form";
	var formData = [];
	localStorage.removeItem(formname);
	$('form input, form select').not('input[type="hidden"]').each(function(){
		formData.push({ id: this.id, value: this.value});
	});
	localStorage.setItem(formname, JSON.stringify(formData));
});

02. Восстановление данных

Предположим, пользователь случайно закрыл вкладку и теперь возвращается. Как по волшебству, все данные по-прежнему доступны. Для этого сначала проверяется наличие данных в локальном хранилище. Если ответ положительный, с помощью цикла "for" загружаем все данные из JSON.

$(document).ready(function() {
	var formname = "demo-form";
	if(localStorage.getItem(formname) != undefined){
		formData = JSON.parse(localStorage.getItem(formname));
		for (var i = 0; i < formData.length; i++) {
			$('[id='+formData[i].id+']').val(formData[i].value);
		}
	}
});

03. Демонстрационный проект

Для наглядности я создал небольшой демонстрационный проект с использованием Bootstrap. Чтобы было видно, что содержится в "Local Storage", я добавил код, отображающий JSON. Однако лучше использовать описанную выше функцию браузера для просмотра данных.

    LocalStorage

		  Описание
		  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

		  LocalStorage

			  Сохранение данных в LocalStorage

				  Читатель LocalStorage

var formname = "demo-form";
// Чтение localStorage
$(document).ready(function() {
	if(localStorage.getItem(formname) != undefined){
		formData = JSON.parse(localStorage.getItem(formname));
		for (var i = 0; i < formData.length; i++) {
			$('[id='+formData[i].id+']').val(formData[i].value);
		}
		// Только для демонстрации
		$('.output').html(localStorage.getItem(formname));
	}
});
// Сохранение в localStorage
$(':input').on('input', function() {
	var formData = [];
	localStorage.removeItem(formname);
	$('form input, form select').not('input[type="hidden"]').each(function(){
		formData.push({ id: this.id, value: this.value});
	});
	localStorage.setItem(formname, JSON.stringify(formData));
	// Только для демонстрации
	$('.output').html(localStorage.getItem(formname));
});
// Очистка localStorage
$("#clean-form").on('click', function() {
	$("#demo-form")[0].reset();
	localStorage.removeItem(formname);
	location.reload(true);
});

04. Скачивание

Я собрал все файлы этого руководства, чтобы упростить настройку. Надеюсь, вы получите столько же удовольствия от проекта, сколько и я, и желаю вам удачи.

artsblog-localstorage-master

Размер файла: 1,4 МБ