В чём проблема?
Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.
Представьте себе бурю эмоций, испытываемых пользователем, только что потерявшим все вводимые данные — а ведь оставалось немного допечатать и отправить форму. Вот если бы только был способ восстановить эти данные, а не заниматься сизифовым трудом…
Это относится, кстати, даже к написанию постов на форум и статей на Хабр. Достаточно распространена практика набора длинных текстов в текстовых файлах с периодическим сохранением, и последующая копипаста на ресурс. Можно регулярно сохранять черновики, но не на всех форумах предусмотрена такая возможность, да и не слишком это удобно делать. Лучше всего дела обстоят у гугла с автосохранением черновиков — пиши себе, вся информация сохраняется и даже на кнопочки тыкать не надо.
Что делать?
Реализовывать сохранение черновиков как у гугла — более сложная задача и совсем не универсальный метод. Мне хотелось, чтобы решение было простым и годным для многократного использования, что в данном случае исключает колдовство над серверной частью.
В результате была написана простенькая свистелка, способная хранить данные, вводимые в форму, в Local Storage браузера и при повторной загрузке той же страницы (query params matter) заполнять ими форму. Данные конкретной формы в Local Storage чистятся при её отправке или ресете.
Как использовать?
У плагина всего одно предназначение, поэтому и использовать его довольно просто: нужно всего лишь выбрать формы, данные которых мы хотим сохранять и восстанавливать.
// сохранять данные форм с идентификаторами form1 и form2
$('#form1, #form2').sisyphus();
// сохранять данные всех форм на странице
$('form').sisyphus();
Update:
Добавлена возможность задать дополнительный префикс ключам для сохранения в Local Storage; таймаут для сохранения данных текстовых полей (input:text и textarea), callback'и на сохранение, восстановление и сброс данных формы.
Параметры по умолчанию:
{
customKeyPrefix: '',
timeout: 0, // в секундах, если 0 - сохранять по каждому нажатию
onSaveCallback: function() {},
onRestoreCallback: function() {},
onReleaseDataCallback: function() {}
}
Сохранять текстовые поля каждые 5 секунд (селекты/радиокнопки/чекбоксы по-прежнему сохраняются при каждом изменении):
$('form').sisyphus({timeout: 5});
Update 2:
Добавлена поддержка IE 8+.
Демо, исходники.