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});
    


    Update 2:
    Добавлена поддержка IE 8+.

    Демо, исходники.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 74

      +7
      весьма полезная тулза, спасибо!
        +3
        Даже, если, судя по отзывам ниже, не многим нужна подобная возможность, приведенный код — хорошая демонстрация использования local storage, которому почему-то пока уделяется меньше внимания, чем, например, canvas. Лично для меня это полезно. Такие случаи у меня бывали, чаще всего из-за проблем с соединением, поэтому даже выработалась привычка копировать наиболее важное содержимое перед нажатием кнопки «Отправить» (например, текста письма, который сочинялся два часа).
          +2
          Скорее всего вы промахнулись :)
          • UFO just landed and posted this here
              0
              Я как раз об этом и говорю.
                0
                todo install punto switcher -> Дневник (Win), или какой-нибудь кейлоггер без уклона в шпионаж, например, Home Keylogger.
                  +2
                  А из-за привычки нажимать Ctrl-Shift-S после каждого абзаца а также теоретической возможности зависания системы мне пришлось пойти дальше и сохранять этот текст на рабочем столе вместо того чтобы писать текст в несохранённом документе.
                    +1
                    Надежнее всего писать черновики в gmail'e с его автосохранением )
              –29
              Если у вас на странице такая нудная и длинная форма, как Вы описали, то проблема в первую очередь в Вас! за то что поставили такую форму на страницу. Это, извините меня, пофигистическое отношение к пользователю.
              Тулза может и полезная, но стоит ли ее использовать?
                +5
                сообщение допустим пишете кому-то в личку — там как быть?
                  +2
                  В первом же абзаце я привёл несколько примеров, иллюстрирующих проблему, и то, что один из них указывает на проблемы с юзабилити, никак не может указывать на наличие проблемы во мне. Более того, я ни слова не написал о своих страницах и никаких форм не описывал.
                    –5
                    Извините за прямое обращение.
                    +1
                    полагаю вы не часто что-то постите многобуквенное на форумах или ЖЖ?
                      –14
                      Почему не пощщю (?)… Но ни разу не было чтобы что-то сорвалось…
                        –1
                        От сумы до тюрьмы не зарекайся.
                    • UFO just landed and posted this here
                        0
                        Вы явно не разработчик веб проектов. Или делали только маленькие сайты.
                        Я же разрабатываю крупные проекты где формы ежеминутно заполняют сотни человек и неудачи бывают часто.

                        З.Ы.
                        Я немного по другому делаю реализацию данной возможности.
                          0
                          Как?
                            0
                            Например, на AJAX-е. Если возникла ошибка (инет отвалился, логин занят и т.п.), или поле какое-то не заполнено (правильнее это проверять на стороне клиента), то введенные в форму данные сохраняются.
                            Или второй вариант (только не защитит от обрыва связи) — при ошибке возвращать страницу формы с уже введенными пользователем данными.
                              +1
                              Вообще, что касается textarea-полей, правильнее было бы в localStorage писать каждые 5-10 секунд. И да, дополнительно ajax вешать, а localstorage чистить только после того, как с сервера окей пришел.
                        +2
                        Для MediaWiki, возможно, полезно будет www.mediawiki.org/wiki/Extension:ClientsideDrafts
                        Написано по аналогичной технике. Работает, если стоит обычный textarea.
                        +2
                        Да, полезно иногда читать спеки по html5 :)
                          –1
                          Сисипус? Как читается-то название?
                            0
                            Сизифус, кажется?
                            –9
                            По ходу сифилис идеально подойдет
                            +5
                            Не помешала бы возможность добавлять некоторые поля в исключения, чтобы не запоминались.
                              +3
                              Большое спасибо, добавил в @todo.
                                +4
                                И возможность автосохранения по таймауту, и коллбеки на операции сохранения в Local Storage, чтобы к примеру можно было уведомлять пользователя о том что его данные сохранены.
                                  +2
                                  Добавил в список, спасибо.
                                    0
                                    Доступно в обновлении.
                                  –16
                                  Интернетом пользуюсь года эдак с 1997, пишу в том числе и большие сообщения в форумы, но описанная проблема как-то ни разу не вставала. Если и были разовые случаи crash-а браузера при заполнении форм, то ничего серьёзного (хотя я даже не могу вспомнить подобного).

                                  Может просто не гнать процессор, следить за ОС, не использовать нестабильные версии браузеров и купить UPS, если питание не стабильное?

                                  P.S. Что действительно случается, причем достаточно часто — так это пропадание инета или временные проблемы с сайтом из-за чего при post-е формы получаю ошибку. Но и это напрягало-бы только в том случае, если бы используемый мной браузер при нажатии кнопки back не восстанавливал-бы сам содержимое полей формы.
                                    +2
                                    Считаете ли вы, что размещение подобных инструкций для всех пользователей на сайте действительно им как-то поможет?)
                                      +1
                                      Trololo!

                                      В 97 еще были модемы по телефонным проводам. Если у вас ни разу не было дисконнекта, то вам пора применить навык удачи в более денежное русло. Попробуйте рулетку, например :)
                                        –1
                                        Из вашего комментария я не уловил:
                                        — у вас компьютер при дисконнектах модема крэшится?
                                        — дисконнекты модемов, которые «по телефонным проводам» (как будто сейчас они работают по другим проводам), как-то противоречат моему P.S?

                                        Заминусовали — молодцы. Желаю вам и дельше лечить крэши компов установкой расширений в браузер :)
                                          0
                                          расширений в браузер


                                          интересно, интересно… :)
                                      +1
                                      Можно добавить возможность вручную указать идентификатор формы, который добавится к УРЛ. Будет полезно на сайтах, использующих навигацию с пом. anchor ( example.com/#some/complex/form ).
                                        0
                                        Спасибо, занёс в todo.
                                        +1
                                        Мне кажется полезнее было бы оформить этот код в виде расширения браузера. В этом случае он будет работать на всех сайтах, независимо от заботы их авторов о пользователях.
                                          +2
                                          Была у меня такая мысль, но это породит следующую проблему — нужно убедить всех пользователей установить это расширение. По-моему, это уже гораздо сложнее.
                                            –2
                                            Да не надо никого убеждать. Наоборот, убедить всех владельцев сайтов поставить ваш код для заботы о пользователях намного сложнее, чем убедить пользователей проявить заботу о самих себе. Кто хоть раз попадал в ситуацию, когда херится только что заполненная форма, тот с удовольствием поставит себе такой плагин в браузер.
                                              +2
                                              Вы слишком категоричны. Во-первых, у меня нет цели убедить всех владельцев сайтов использовать это решение — я просто делюсь им с сообществом, и те, кто сочтут должным, воспользуются им. Во-вторых, не все пользователи знают что такое плагин, а так как доля таких довольно велика, то и задача автоматически усложняется.
                                            +2
                                            Под FF уже есть Lazarus. Но, раз вы о таком не слышали, пользы от альтернативы на базе этого скрипта будет не больше чем от него, т.к. и его никто не будет ставить.
                                              0
                                              Под хром тоже. Отличный аддон.
                                            +1
                                            как обстоят дела с авторизацией? Чаще всего после краша браузера необходимо логиниться заново. Формы после логина восстановятся?
                                            Еще: если чел (к примеру в клубе) просто передумал и закрыл браузер, а новый посетитель открыл эту же страницу, поля будут заполнены? Там ведь может быть и личная информация.
                                              +1
                                              Там же используется локальное хранилище, а не хранение данных на сервере. Т.е. данные сохраняются где-то в вашем «хомяке». Естественно, чтобы ими воспользоваться, нужен доступ к вашему компьютеру.
                                              0
                                              Но почему, почему оно чистит local storage по Reset?! Это же самая частая причина, когда подобная тулза в принципе может быть нужна: заполнял-заполнял форму, а потом по ошибке нажал не ту кнопку.
                                                +5
                                                Как «клиент», давно уже озаботился этой проблемой и поставил дополнение для firefox Lazarus.
                                                  0
                                                  Отлично!
                                                  0
                                                  Что означает trollface в тегах к этому посту? :)
                                                    +1
                                                    Достаточно посмотреть на демо.
                                                    0
                                                    Мне кажется, тут главная проблема состоит в том, что сам факт сохранения информации формы не очевиден для пользователя. Возникнут вопросы: почему форма не очищается и как это сделать.

                                                    И еще бы хотелось бы, чтобы к ключу (prefix) можно было добавлять что-то свое, например, идентификатор пользователя.
                                                      0
                                                      Аналогичные предложения уже записаны в todo.
                                                      0
                                                      к сожалению, данный подход работает только для стандартных форм, безо всяких расширений. в течении 15 минут пока не придумал, как прикрутить этот годный продукт к, скажем, CKEditor. господа хабровчане, есть идеи?
                                                        0
                                                        CKEditor заменяет поля ввода iframe'ами, такого у меня действительно не предусмотрено. Есть идеи предусмотреть :)
                                                          +1
                                                          в данный момент делаем костылем — autosave-плагин для CKEditor, который прячет в hidden-элемент весь набранный контент, а autosave уже обрабатывается sisyphus.
                                                        0
                                                        Эх… когда ж браузеры научатся запоминать заполненные формы?
                                                        Описанные ситуации не редкость, и польза данного скрипта весьма ценна. Спасибо.
                                                          +1
                                                          В каких браузерах работает? Почему не cookies?
                                                            +1
                                                            Первый вопрос снимается, наконец-то загрузилось demo.
                                                              +1
                                                              А почему cookies? Сколько информации можно хранить в печеньке?
                                                              +1
                                                              Можно еще состояние прокрутки страницы запоминать. По сути-то человек прокрутит страницу до того места, на каком прервался.
                                                                0
                                                                Пришел, заполнил форму, свет не отключали, крэша тоже не было, пива на клаву не проливал, в итоге нажал на резет и ушел…

                                                                А если честно, обнаружил небольшой баг в Гугл Хроум — выбрал 1 checkbox и 1 radiobutton, закрыл, открыл, нажал на резет а радио не резетиться…
                                                                  0
                                                                  Кстати, технология локального хранилища html5 — отличная штука, чтобы забыть, наконец-таки, о бесконечных потоках куки.
                                                                  Кроме того, можно уже написать приличный медиаплеер (видео + аудио) на «голом» html5 с поддержкой плейлистов, которые можно будет сохранять у пользователя локально.

                                                                  Эх, есть где воображению разгуляться!

                                                                  // а если еще и браузеры будут поддерживать тег input с параметрами device (для камеры и микрофона), можно будет (через вебсокеты, например) сделать отличный аналог «скайпа», но без зонда.
                                                                    0
                                                                    Нашел баг. У меня есть выбор чекбоксов на странице. Когда отмечаю штук 5, закрываю страницу и после открытия выбраны все чекбоксы… Жаль из-за этого не могу использовать этот замечательный плагин.
                                                                    Жду реализации когда можно задать сохранение отдельных полей, а не формы в целом. Чаще всего страдают поля textarea и input[text].
                                                                      +1
                                                                      Плагин для LiveStreet подключающий Sisyphus.js в формы создания топиков.
                                                                        0
                                                                        На сколько я заметил, Хром сохраняет все формы при краше и потом всё восстанавливает, даже из динамических форм.
                                                                          –1
                                                                          В каких браузерах работает?
                                                                          Идея скрипта классная, попробую прикрутить его к одному из проектов с многоэтажными формами, в которых пользователи регулярно теряют данные, от того, что не нажимают кнопку «Сохранить» когда надо (сохранение работает там по принципу сохранения черновиков писем — без ухода со страницы и очищения формы, но тем не менее).
                                                                            0
                                                                            А можно ли полностью свой префикс использовать?
                                                                              0
                                                                              Можно)
                                                                                0
                                                                                И то правда :)
                                                                              0
                                                                              Огонь плагин! Поставил его на добавление клиентов в crm очень прикольно! noRerih, вот никак не могу разобраться как мне после успешной отправки данных формы удалять данные этой формы? У меня кнопка добавления находится вне ...
                                                                                0
                                                                                noRerih тут обнаружил проблему! когда поле type=«hidden», то почему-то $('#form1').sisyphus().manuallyReleaseData(); не зачищает данные полей где type=«hidden». Странно как-то. Попробовал эти поля исключить из отслеживания excludeFields: $( "#vid_connection" ) тоже не работает почему не понятно.

                                                                                Only users with full accounts can post comments. Log in, please.