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

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

20 марта 2020 HTML JavaScript

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

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

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Как запретить переход по ссылке и отменить действия по умолчанию на JavaScript

Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее

Автоопределение города по IP на сайте

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

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

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

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

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

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

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

  1. Олег:

    эм. Что-то код не кэширует вообще никакие данные.

    Скопировал полностью код. вставил форму, для теста. для теста подрубил jquery и указал id формы которую необходимо кэшировать.
    Ни ошибок, ни кэширования — нет))) локальное — пустое) Google chrome Версия 80.0.3987.163

  2. Антон:

    Возможно вы запускаете код с локального HTML файла. Файл нужно запустить на хостинге, веб-сервере или локальном веб-сервере, таком, как например, Open Server.

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

*

code