Добавить в избранное

Автосохранение данных, введенных в поля формы

Дата: 2011-12-15

Какую задачу будем решать?


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

Представьте, какую бурю эмоций испытает пользователь, которому нужно добавить всего лишь пару символов, чтобы отправить форму с большим объемом вручную заполненных полей, и вдруг все данные теряются. Ужасно. Если, конечно, нет способа восстановить данные, чтобы избежать участи Сизифа.

Имеющиеся варианты решения


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

Еще одно решение: 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 использовался для формы, вы можете применять его для другой формы. В данном случае скрипт не будет создавать дополнительного экземпляра и будет использовать те же опции.:


// Сохраняем данные формы form1 каждые 5 секунд
$('#form1').sisyphus( {timeout: 5 } );
 
…
 
// Если нужно сохранять данные второй формы
$('#form2').sisyphus( {timeout: 10} )
 
// Теперь данные будут сохраняться в обеих формах каждые 10 секунд

Значения опций можно изменять в ходе работы:


var sisyphus = $('#form1').sisyphus();
 
	…
	 
	// Если вы решите, что сохранять данные по таймеру лучше
	$.sisyphus().setOptions( {timeout: 15} );
	 
	…
	 
	// Или
	sisyphus.setOptions( {timeout: 15} );

Данный урок подготовлен для Вас саитом tiwebmaster.ru
СКАЧАТЬ ИСХОДНИКИ МОЖНО ТУТ

Просмотров: 2707

Последние 5 уроков

Обработка AJAX с помощью jQuery (часть 2)

В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью AJAX и как.


Обработка AJAX с помощью jQuery (часть 1)

Первая статья посвящеа общему описанию технологии AJAX и потроение запросов при помощи метода $.get().


Размножения полей формы на сайте

Здравствуйте! уважаемые читатели Бывают ситуации когда нужно добавить на сайте несколько данных по одному критерию, можно несколько раз добавлять данные но это не проффесионально поэтому я предлогаю материал по добавлению полей при помощи jQuery.


Автосохранение данных, введенных в поля формы

Представьте, какую бурю эмоций испытает пользователь, которому нужно добавить всего лишь пару символов, чтобы отправить форму с большим объемом вручную заполненных полей, и вдруг все данные теряются. Ужасно. Если, конечно, нет способа восстановить данные, чтобы избежать участи Сизифа.


10 вставок кода jQuery

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


Видео уроки по php,jquery,ajax,css,html,сео