ProfiPHPProfiPHP
Категория: jQuery

Плагин Storage

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

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

Чтобы данной ситуации не случилось, необходимо просто сохранять введенную информацию в файлы Cookies вашего браузера. Для этого существует плагин Storage.

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

Автором данного скрипта является Dave Schindler. Страница плагина - Storage.

После скачивания файлов плагина Storage его необходимо подключить:
<script type="text/javascript" src="/js/storage.js"></script>';
Обязательно перед использованием необходимо подключить библиотеку jQuery.

Чтобы указать, какие именно поля нужно сохранять и заполнять автоматически, нам необходимо добавить им класс "saveForms", например:
<textarea class="saveForms"></textarea>
При успешной отправке данных, все данные полей, сохраненные в Cookies, должны быть удалены. Для этого необходимо в кнопке подтверждения формы добавить класс "saveFormsSubmit":
<input type="submit" class="saveFormsSubmit" value="Отправить" />
Внимание: Сохраненные поля формы будут автоматически заполняться при загрузке страницы. Динамически создаваемые поля после загрузки заполнены не будут!

Последнее, что необходимо сделать, это в самом конце кода, перед "</body>" подключить скрипт "saveforms.js":
<script type="text/javascript" src="/js/saveforms.js"></script>';
со следующим содержимым:
(function saveForms() {
var text, cl;
$(".saveForms").each(function(i) {
cl = "saveForms"+i;
$(this).addClass(cl); // add new class
text = $.Storage.get(cl);
if (text && text.length > 0 && !$(this).val()) {
$(this).val(text); // set field data
}
});
$(".saveForms").keyup(function() {
$.Storage.set($(this).attr("class").split(" ")[$(this).attr("class").split(" ").length -1], $(this).val()); // save field data
});
$(".saveFormsSubmit").click(function() {
$(".saveForms").each(function(i) {
$.Storage.remove("saveForms"+i); // remove data
});
});
})();
После подключения плагина Storage можно быть гораздо спокойнее, потому что данные, которые вы вводите в текстовые поля, проходят процедуру резервного сохранения.

Добавить комментарий

Имя:
Текст комментария: