Главная > Формы > Garlic.Js и Sisyphus.Js: jQuery-плагины, хранящие значения формы при помощи HTML5 LocalStorage

Garlic.Js и Sisyphus.Js: jQuery-плагины, хранящие значения формы при помощи HTML5 LocalStorage


6 декабря 2012, 14:40. Разместил: Design FactoRy
Проблема так же стара, как и сами формы в веб-дизайне. Чем длиннее форма, тем больше потенциальная проблема. Проблема, о которой мы говорим, может повстречаться вам гораздо чаще одного раза. Она обычно появляется только после заполнения самых сложных форм или когда вы спешите и просто хотели как можно скорее оформить заказ, потому что обещали жене сделать это сегодня. Проблема тут как тут. Форма, по каким-то причинам, не проходит на следующий этап, вкладка браузера внезапно закрывается, каким-то образом вы случайно нажимаете F5 или происходит что-нибудь такое, отчего вся форма сбрасывается и ваш истерический смех слышен всем вокруг. Эти плагины для jQuery помогут вам избежать этой ситуации, и никогда больше не сталкиваться с ней.

Garlic.Js и Sisyphus.Js: локальное сохранение контента ваших форм в LocalStorage

Garlic.Js и Sisyphus.Js: jQuery-плагины, хранящие значения формы при помощи HTML5 LocalStorage

Если у вас есть интернет-магазин, то вам обязательно следует учитывать данную проблему. Если потенциальные покупатели будут заполнять форму снова и снова, они точно потеряют интерес в вашем магазине. Другими словами: они оставят свою корзину с покупками прямо на кассе, не дождавшись своей очереди.

Этот эффект распространяется не только на посетителей магазина. Конечно же. Каждый житель интернета будет подвержен этому эффекту, если ему придется снова и снова заполнять одну и ту же форму. И это связано не только с усталостью пальцев. Веб-дизайнерам тоже следует подумать над этой проблемой.

Garlic.js и Sisyphus.js, два относительно свежих плагина для jQuery, представляют собой многообещающее решение. Хотя Sisyphus.js более старый проект, Garlic.js на сегодняшний день привлекает множество внимания, так как это новый плагин, поддерживаемый амбициозным разработчиком, который принимает рекомендации и следит за отзывами.

Принцип действия обоих плагинов идентичен. Оба плагина требуют современный браузер, так как используют HTML5 API localStorage, маленький трюк, который позволяет вам хранить введенный в веб-страницу контент на локальном жестком диске. Здесь не предусмотрены запасные варианты или порты для более старых версий браузеров. Вам придется думать над ними самостоятельно. Довольно хороший подход для браузеров IE6/7 вы сможете найти в ссылках, приведенных в этой статье.

Основное применение довольно просто для обоих плагинов. После того как вы встроите скрипт в головной раздел вашего HTML-кода не забудьте о jQuery. Кстати, применять его нужно следующим образом:

Garlic.js:

<form data-persist="garlic" method="POST"></form>

Атрибут данных должен быть прикреплен к каждой форме, введенные значения которой вы хотите сохранять при помощи Garlic. Если у вас на странице больше одной формы, то вам нужно прикреплять атрибут для каждой формы по-отдельности.

Sisyphus.js работает с использованием вызова функции, а не атрибута данных:

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

Как вы уже, наверное, догадались, Sisyphus позволяет вам указать несколько форм в одном запуске функции. Если вы хотите охватить все формы на странице, вызов будет проще:

$('form').sisyphus();

Sisyphus предлагает больше опций настроек чем Garlic. Посредством Sisyphus вы можете даже запускать функции в зависимости от различных положений полей вашей формы. Sisyphus предлагает большую функциональность.

Тем не менее, не спешите предпочесть Sisyphus. Guillaume Potier, разработчик Garlic, обещает быстро расширить функционал. Подход к управлению плагином заключается в использовании атрибута данных, и это звучит довольно привлекательно.

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

Полезные ссылки:

* Документация для Garlic.Js – Garlicjs.org
* Демо и документация для Sisyphus.Js – Github
* Преобразование localStorage в UserData (для IE) – Github
Вернуться назад