Sisyphus.js − защищаем данные форм пользователя от случайных потерь

В чём проблема?

Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.

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


Это относится, кстати, даже к написанию постов на форум и статей на Хабр. Достаточно распространена практика набора длинных текстов в текстовых файлах с периодическим сохранением, и последующая копипаста на ресурс. Можно регулярно сохранять черновики, но не на всех форумах предусмотрена такая возможность, да и не слишком это удобно делать. Лучше всего дела обстоят у гугла с автосохранением черновиков — пиши себе, вся информация сохраняется и даже на кнопочки тыкать не надо.

Что делать?

Реализовывать сохранение черновиков как у гугла — более сложная задача и совсем не универсальный метод. Мне хотелось, чтобы решение было простым и годным для многократного использования, что в данном случае исключает колдовство над серверной частью.

В результате была написана простенькая свистелка, способная хранить данные, вводимые в форму, в 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});

via habrahabr.ru