Сохраняем данные формы на сайте при перезагрузке страницы, с помощью JavaScript и sessionStorage

Представьте ситуацию - Ваш пользователь вводил данные в форму связи на сайте, вдруг у него завис Интернет, он перезагрузил страницу и все данные стёрлись... Либо он просто случайно нажал F5, либо случайно кликнул по любой ссылке на сайте и перешёл на другую страницу... Если мы никуда не записываем вводимые в форму данные, то при возврате на страницу с формой, Ваш пользователь будет мягко говоря опечален. Особенно грустно ему будет, если это была не просто форма обратной связи с именем и телефоном, а расширенная форма типа опросника, для заполнения которой нужно потратить как минимум несколько минут своего времени. Чтобы сохранить вводимые данные - мы будем использовать JavaScript и sessionStorage, а именно объект Storage текущей сессии браузера. Это позволит нам сохранить все данные формы в элементах типа input, textarea.

Логика работы нашего js-скрипта будет довольна простой: при вводе данных в поля формы, используя событие input, мы будем записывать данные в объект Storage. Событие input подходит для этой цели лучше всего, поскольку оно срабатывает как только меняется значение поля. В отличие от события change, данное событие сработает при любых изменениях, в том числе таких как: вставка текста с помощью контекстного пункта меню "вставить", вставка текста с помощью комбинации Ctrl+V.

Изначально я предполагал использовать не sessionStorage, а localStorage, но в результате сделал выбор в пользу первого. Значения в sessionStorage существуют до тех пор, пока открыто окно или вкладка, в котором они сохранены. Если мы перезагрузим страницу - значения в sessionStorage сохранятся. Если мы в текущей вкладке перейдём по ссылке на другую страницу и затем вернёмся обратно - значения также будут сохранены. Но если мы откроем данную страницу в новом окне браузера то будет создана новая сессия (кстати именно в этом состоит основное отличие sessionStorage от cookies).

А в localStorage значения существуют независимо от закрытия вкладки или браузера, поэтому это не наш вариант. Ведь нам не нужно, чтобы браузер клиента вечно хранил наши данные в своём хранилище.

Чтобы сохранить значения в sessionStorage, можем использовать 3 варианта синтаксиса:

sessionStorage.setItem('key', 'value');

Либо:

sessionStorage.key = "value";

Либо:

sessionStorage["key"] = "value";

Используйте тот, который нравится Вам больше, принципиальных отличий между ними нет.

Обращаю Ваше внимание, что в данном примере в качестве key используются атрибуты name поля ввода, т.е. у всех Ваших textarea и input обязательно должен стоять данный атрибут.

Загружаем скрипт на страницу:

document.addEventListener("DOMContentLoaded", function() { // событие загрузки страницы

    // выбираем на странице все элементы типа textarea и input
    document.querySelectorAll('textarea, input').forEach(function(e) {
        // если данные значения уже записаны в sessionStorage, то вставляем их в поля формы
        // путём этого мы как раз берём данные из памяти браузера, если страница была случайно перезагружена
        if(e.value === '') e.value = window.sessionStorage.getItem(e.name, e.value);
        // на событие ввода данных (включая вставку с помощью мыши) вешаем обработчик
        e.addEventListener('input', function() {
            // и записываем в sessionStorage данные, в качестве имени используя атрибут name поля элемента ввода
            window.sessionStorage.setItem(e.name, e.value);
        })
    })

}); 

С помощью данного скрипта (который работает без каких-либо зависимостей), мы сохраним данные из полей ввода и сбережём хорошее настроение и нервы Ваших пользователей!