Сохранение данных в форме после обновления страницы
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-код формы
<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="[email protected]" 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();
});Сейчас плагин не принимает никаких настроек, но вы можете изменить его так, чтобы он заполнял значения по умолчанию для формы или чтобы они хранились только заданный промежуток времени.
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее
В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее
Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее
Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее
эм. Что-то код не кэширует вообще никакие данные.
Скопировал полностью код. вставил форму, для теста. для теста подрубил jquery и указал id формы которую необходимо кэшировать.
Ни ошибок, ни кэширования — нет))) локальное — пустое) Google chrome Версия 80.0.3987.163
Возможно вы запускаете код с локального HTML файла. Файл нужно запустить на хостинге, веб-сервере или локальном веб-сервере, таком, как например, Open Server.