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

20 марта 2020 HTML JavaScript jQuery

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! 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-код формы

    Firstname:
    
    
    Surname:
    
    
    Email:
    
    
    Website:
    
    
    Password:
    
    
    Is this checked?:
    
    
    Is this checked?:
    
        Option 1
        Option 2
        Option 3
        Option 4
    
    
    
    

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

Теперь, когда мы подтвердили, что браузер поддерживает локальное хранилище, первое, что нам нужно сделать, — это создать ключ, который будет определять наши данные в хранилище. Для этого я использую атрибут 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();
});

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