—»     —»   Garlic.Js и Sisyphus.Js: jQuery-плагины, хранящие значения формы при помощи HTML5 LocalStorage
  Раздел: Формы   Комментариев: 2  

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



Проблема так же стара, как и сами формы в веб-дизайне. Чем длиннее форма, тем больше потенциальная проблема. Проблема, о которой мы говорим, может повстречаться вам гораздо чаще одного раза. Она обычно появляется только после заполнения самых сложных форм или когда вы спешите и просто хотели как можно скорее оформить заказ, потому что обещали жене сделать это сегодня. Проблема тут как тут. Форма, по каким-то причинам, не проходит на следующий этап, вкладка браузера внезапно закрывается, каким-то образом вы случайно нажимаете 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
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: отправные формы, jQuery, HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 3687   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 декабря 2012 @ 15:43
Написал: 9210530 — группа: Читатели  
На сайте с: 16.11.2009   |   Публикаций: 0   |   Комментариев: 2
ICQ: --- не указано ---
Проще записать данные в сессию или в куки чем морочится с этими плагинами, без поддержки старых браузеров.
Комментарий #2: 17 июня 2015 @ 13:11
Написал: Олег — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
не работает не то не другое (Garlic, Sisyphus) при сохранении текстовых импутов
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930