Представьте ситуацию: вы заполняете большую форму, например, оформляете заказ в интернет-магазине, покупаете билет на концерт, пишете запрос в техническую поддержку продукта или отзыв на услугу. И вот, вы хотите ввести что-то и случайно вместо цифры на клавиатуре нажимаете
F5, задеваете тачпад и нажимаете на ссылку, свайпом от края экрана вызываете действие "назад" на мобильном. В результате данные потеряны. Те, кто писал курсовые и дипломные работы в Word, понимают всю боль, когда "Приложение Word не отвечает".Если вы разрабатываете форму, особенно большую, то примите ряд мер по предотвращению потери введённых данных. Тем более, эти меры достаточно простые.
Запрос на перезагрузку страницы.
Подпишитесь на событие
beforeunload, функция-обработчик которого возвращает строку. Из-за приватности, это можно сделать только если пользователь взаимодействовал со страницей (клики, прокрутка). Подробнее со сниппетом кода можно ознакомиться в заметке Криса Койера.Таким образом, при попытке обновить страницу или закрыть вкладку, браузер покажет системное диалоговое окно и предупредит о потере данных, а процесс перезагрузки/закрытия будет отложен до тех пор, пока пользователь не подтвердит или не отменит это.
Сохранение введённых данных.
При вводе данных в форму подпишитесь на одно из событий (
input, change), считывайте все текущие данные с полей и сохраняйте их в локальное хранилище (LocalStorage, IndexedDB). При использовании <form> и стандартных полей ввода, вы можете получить объект FormData, сериализовать его в JSON-строку и сохранить.При случайном обновлении страницы сообщите пользователю, что в браузере есть сохранённые ранее данные, которые можно восстановить, и добавьте в начале формы кнопку, при клике на которую достаньте данные из хранилища и заполните ими форму.
