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

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


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

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


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

Что делать?


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

В результате была написана простенькая свистелка, способная хранить данные, вводимые в форму, в Local Storage браузера и при повторной загрузке той же страницы (query params matter) заполнять ими форму. Данные конкретной формы в Local Storage чистятся при её отправке или ресете.

Как использовать?


У плагина всего одно предназначение, поэтому и использовать его довольно просто: нужно всего лишь выбрать формы, данные которых мы хотим сохранять и восстанавливать.
  // сохранять данные форм с идентификаторами form1 и form2
  $('#form1, #form2').sisyphus();

  // сохранять данные всех форм на странице
  $('form').sisyphus();


Демо, исходники.
Поделиться

Copyright 2008-2012
Rambler's Top100