• 4 минуты чтения

• Кодирование, JavaScript

• Поделись ТвиттерЛинкедин

Эта статья является третьей в нашей новой серии, в которой представлены новые, полезные и свободно доступные инструменты и методы, разработанные и выпущенные активными членами сообщества веб-дизайнеров. Первая статья была посвящена PrefixFree; вторая представила 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 или выше.

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

• Хром 4+,
• Фаерфокс 3.5+,
• Опера 10.5+,
• Сафари 4+,
• IE 8+,
• Он также работает на Android 2.2 (как родной браузер, так и Dolphin HD). Другие мобильные платформы не тестировались.

Скачать скрипт: Sisyphus.js и демоверсия размещены на GitHub; уменьшенная версия весит около 3,5 КБ. Также доступны дорожная карта и средство отслеживания проблем.

(аль)