—»     —»   Sisyphus.js: автоматическое сохранение введенных пользовательских данных при помощи HTML5
  Раздел: Скрипты и коды, Формы   Комментариев: 2  

Sisyphus.js: автоматическое сохранение введенных пользовательских данных при помощи HTML5



Данная статья направлена на описание новых полезных и бесплатных инструментов и техник, разработанных активными пользователями веб-дизайн сообщества. До новогодних праздников мы знакомили вас с Foundation, надежной платформой, которая помогает разрабатывать прототипы и код. На этот раз мы хотим предложить вам Sisyphus.js – библиотеку, разработанную Александром Каупаниным, и позволяющую создавать черновики на подобии Gmail для пользовательской стороны, а также кое-что еще.

Какие проблемы нужно решать?

Случалось ли у вас так, что вы долго заполняете длинную форму в онлайн или пишете детальный и всеобъемлющий комментарий, и тут… крах браузера! Либо вы наверняка случайно закрывали не ту вкладку браузера, либо связь с интернетом обрывалась, отключалось электричество (и, по закону подлости, вы не обзавелись СБП заранее). Если вы не попадали в подобные ситуации, то вы – счастливчик! Но никто не застрахован от подобных неприятностей.



Представьте тот ураган эмоций, которыми пользователь захлестывает наш мир, когда вся его огромная, аккуратно заполненная, форма исчезает! Невероятно? Теперь у нас есть шанс избежать подобных незадач, избежать этого сизифова труда.

Существующие решения

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

После выпуска Sisyphus.js мы ознакомились с Lazarus, расширением для Firefox и Chrome, которое помогает восстанавливать данные. Но браузерные плагины ведут лишь к еще большей проблеме – дистрибуции. Некоторые пользователи даже понятия не имеют о том, что такое расширение, а некоторые просто не любят возиться со всеми этими установками и настройками.

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

Решение: Sisyphus.js

Внедрение функции автоматического сохранения черновиков как в системе gmail – это не такая уж и простая задача. Я хочу, чтобы решение было максимально простым и понятным.

В результате мы должны получить небольшой скрипт, который будет хранить в себе данные из локальных документов, принадлежащих браузеру пользователя. Затем он будет восстанавливать утерянные данные после того, как браузер будет открыт вновь. Документ этот будет обновляться каждый раз как пользователь подтвердит ввод или очистит форму.

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

Настроить Sisyphus.js достаточно просто. Просто выберите, какие формы вам нужно защитить:

$('#form1, #form2').sisyphus();

Либо вы можете защитить все формы, присутствующие на странице:

$('form').sisyphus();

Следующие значения являются значениями по умолчанию, но их можно изменять:

{
customKeyPrefix: '',
timeout: 0,
onSave: function() {},
onRestore: function() {},
onRelease: function() {}
}

Давайте разберем эти опции:

* customKeyPrefix
Дополнение к ключу в локальном хранилище для сохранения значений, введенных в формы.

* timeout
Интервал в секундах, по истечении которого данные в форме будут сохранены. Если выставлено значение 0, то сохранение будет производиться каждый раз, как в форму будут внесены изменения.

* onSave
Функция, которая запускается каждый раз при записи данных в локальное хранилище.

* onRestore
Функция, которая запускается каждый раз при восстановлении данных из локального хранилища. В отличие от onSaveCallback, она применяется ко всей форме, а не к отдельным полям.

* onRelease
Функция, которая запускается каждый раз при очистке локального хранилища от сохраненных данных.

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

Например:

// Save form1 data every 5 seconds
$('#form1').sisyphus( {timeout: 5 } );



// If you want to protect second form, too
$('#form2').sisyphus( {timeout: 10} )

// Now the data in both forms will be saved every 10 seconds

Конечно же, вы можете изменять данные на лету:

var sisyphus = $('#form1').sisyphus();



// If you decide that saving by timeout would be better
$.sisyphus().setOptions( {timeout: 15} );



// Or
sisyphus.setOptions( {timeout: 15} );

Рекомендации к использованию

Требования: Sisyphus.js требует JQuery версии 1.2 или выше.

Поддержка браузеров:

* Chrome 4+,
* Firefox 3.5+,
* Opera 10.5+,
* Safari 4+,
* IE 8+,
* Скрипт также работает на Android 2.2 (как на родном браузере, так и в Dolphin HD). Другие мобильные платформы пока еще не проходили тестирование.

Скачать скрипт: Sisyphus.js и демо, размещенное на GitHub.
Уменьшенная версия весит около 3.5кб. Вы также можете воспользоваться руководством.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, jQuery, отправные формы, HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 7564   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 февраля 2012 @ 13:55
Написал: hunter — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересная статья, узнал много нового.
Комментарий #2: 10 февраля 2012 @ 08:15
Написал: senator3821 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересная статья? Да просто шикарная статья!!!
Как по мне так на этом сайте я уже узнал много чего интересного и важного для мой работы, а авторам огромное спасибо за подобные инормационные данные!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Аттестация рабочих мест
Подробно об услугах Отчеты о прошедших, советы коллег
dialog-consult.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930