Skip to main content

Сохранение данных в форме после обновления страницы

Сохранение данных в форме после обновления страницы

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

В этом руководстве мы будем использовать механизм localStorage для хранения текущего состояния формы. Это означает, что когда страница перезагружается или пользователь повторно открывает страницу после ее закрытия, форма заполняется предыдущими значениями. Для повышения сложности мы будем хранить данные в виде сериализованных строк JSON.

Приступим

Для начала нам нужно создать плагин jQuery. Это позволит нам передавать параметры, определять настройки по умолчанию и поддерживать возможность передачи по цепочке.

(function ( $ ) {
    $.fn.FormCache = function( options ) {
        var settings = $.extend({
        }, options );
        
        return this.each(function() {    
            var element = $(this);            
        });
    };     
}( jQuery ));

Первое, что нам нужно сделать, это проверить поддержку браузером нового функционала хранилища HTML5. Для этого мы просто проверяем, что класс Storage определен правильно. Мы сделаем это в функции return .each оболочки плагина. На этом этапе следует отметить, что некоторые браузеры не включают локальное хранилище для локальных HTML-файлов, вам нужно будет запустить его на вашем веб-сервере, чтобы проверить функциональность должным образом.

if(typeof(Storage)!=="undefined"){
} else {
    alert('local storage is not available');
}

HTML-код формы

<form name="signup-form">
    <label for="firstname">Firstname:</label>
    <input id="firstname" name="firstname" type="text" title="Please enter your firstname" placeholder="Jonny" autofocus required />
    
    <label for="surname">Surname:</label>
    <input id="surname" name="surname" type="text" title="Please enter your surname" placeholder="Schnittger" required />
    
    <label for="email">Email:</label>
    <input id="email" name="email" type="email" title="Please enter your email address" placeholder="jonny@schnittger.me" required />
    
    <label for="website">Website:</label>
    <input id="website" name="website" type="url" title="Please enter the url to your website (optional)" placeholder="http://schnittger.me" />
    
    <label for="password">Password:</label>
    <input id="password" name="password" type="password" title="Please enter a password, it must contain at least 1 lowercase and 1 uppercase character and be at least 6 characters in length" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" placeholder="******" required />
    
    <label for="checkbox">Is this checked?:</label>
    <input id="checkbox" name="checkbox" type="checkbox" checked />
    
    <label for="checkbox">Is this checked?:</label>
    <select id="options" name="options">
        <option value="opt-1">Option 1</option>
        <option value="opt-2">Option 2</option>
        <option value="opt-3">Option 3</option>
        <option value="opt-4">Option 4</option>
    </select>
    
    
    <input type="submit" value="Signup!" />

</form>

Инициализация хранилища

Теперь, когда мы подтвердили, что браузер поддерживает локальное хранилище, первое, что нам нужно сделать, — это создать ключ, который будет определять наши данные в хранилище. Для этого я использую атрибут name формы, но вы также можете легко использовать атрибут ID. Затем мы проверяем, содержит ли объект localStorage значение для нашего ключа. Если все в порядке, мы будем использовать функцию JSON.parse для автоматического анализа текущего значения. Если данные не сериализуются или не заданы, мы инициализируем их с помощью функции JSON.stringify.

var key = element.attr('name');

var data = false;
if(localStorage[key]) {
    data = JSON.parse(localStorage[key]);
}

if(!data) {
    localStorage[key] = JSON.stringify({});
    data = JSON.parse(localStorage[key]);
}

Кэшируем данные формы

Чтобы сохранить значения форм в localStorage, нам нужно знать, когда они будут изменены. Для этого мы используем событие jQuery .change. Мы свяжем событие .change с функцией on_change сразу после инициализации нашего хранилища.

element.find('input, select').change(on_change);

Наша функция on_change будет принимать один параметр, объект event jQuery. Из объекта event мы будем использовать свойство .target, чтобы получить измененный элемент формы. Затем мы определим его родительскую форму с помощью .parents и получим ее имя для восстановления нашей инициализированной строки JSON из localStorage. Элемент checkbox не использует атрибут value, поэтому для правильного определения, если он отмечен, мы будем использовать функцию .is. Для других входных данных мы будем просто использовать .val как обычно.

Как только мы получим объект data, нам нужно будет преобразовать его обратно в строку, используя JSON.stringify, и обновить объект localStorage.

function on_change(event) {
    var input = $(event.target);
    var key = input.parents('form:first').attr('name');
    var data = JSON.parse(localStorage[key]);
    
    if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') {
        data[input.attr('name')] = input.is(':checked');
    }else {
        data[input.attr('name')] = input.val();
    }
    
    localStorage[key] = JSON.stringify(data);
}

Получение данных из хранилища

Теперь, когда у нас есть возможность кэшировать значения форм, нам нужно будет извлечь их обратно во время загрузки страницы и автоматически заполнить значения полей. Чтобы сделать это, мы просто выбираем каждый элемент в зависимости от его типа и устанавливаем значение с помощью .val, либо устанавливаем атрибут checked для элемента checkbox. Чтобы сделать checkbox не отмеченным по умолчанию, мы просто удаляем атрибут checked, используя .removeAttr.

Полный код

Если вы выполнили все вышеуказанные шаги, в итоге у вас должен получиться следующий код:

(function ( $ ) {
    $.fn.FormCache = function( options ) {
        var settings = $.extend({
        }, options );
        
        function on_change(event) {
            var input = $(event.target);
            var key = input.parents('form:first').attr('name');
            var data = JSON.parse(localStorage[key]);
            
            if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') {
                data[input.attr('name')] = input.is(':checked');
            }else {
                data[input.attr('name')] = input.val();
            }
            
            localStorage[key] = JSON.stringify(data);
        }
        
        return this.each(function() {    
            var element = $(this);
            
            if(typeof(Storage)!=="undefined"){
                var key = element.attr('name');
                
                var data = false;
                if(localStorage[key]) {
                    data = JSON.parse(localStorage[key]);
                }
                
                if(!data) {
                    localStorage[key] = JSON.stringify({});
                    data = JSON.parse(localStorage[key]);
                }
                element.find('input, select').change(on_change);
                
                element.find('input, select').each(function(){
                    if($(this).attr('type') != 'submit') {
                        var input = $(this);
                        var value = data[input.attr('name')];
                        if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') {
                            if(value) {
                                input.attr('checked', input.is(':checked'));
                            } else {
                                input.removeAttr('checked');
                            }
                        } else {
                            input.val(value);
                        }
                    }
                });
                
                
            }
            else {
                alert('local storage is not available');
            }
        });
    };     
}( jQuery ))

Использование плагина

Чтобы начать использовать плагин, все, что нам нужно сделать, это вызвать его, используя обычную функцию document ready и простой селектор форм.

$(document).ready(function(){
    $('form').FormCache();
});

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

Похожие записи
Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню... Читать далее

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например... Читать далее

Отправка письма с вложениями на PHP и AJAX

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем... Читать далее

Простая пагинация на PHP и MySQL

Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с... Читать далее

Всплывающее окно при закрытии страницы

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

Календарь в input для ввода даты

Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем... Читать далее

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

*

code