Я создаю приложение PHP / Symfony с несколькими динамическими формами.Большинство форм простые, но некоторые более продвинутые.Расширенные формы состоят из следующих элементов:
Вкладки , форма разделена на несколько вкладок (Bootstrap CSS).Навигация между этими вкладками осуществляется с помощью JavaScript.
Коллекции , некоторые поля формы являются коллекциями, пользователь может добавлять / удалять эти поля из DOM.Добавление и удаление выполняется с помощью JavaScript.
Скрытые поля , некоторые поля скрыты и доступны только для редактирования через модал (Bootstrap CSS).Например: значение поля name отображается на странице, когда пользователь нажимает на него, появляется модальное поле с дополнительными полями, такими как address , почтовый индекс и город .Когда поле имени обновляется в модальном режиме, DOM также обновляется для отображения нового имени на странице.
Все это работает очень аккуратно, но некоторые проблемы возникают, когдапользователь нажимает кнопку возврата браузера:
- Вкладки , последняя выбранная вкладка больше не выбирается.
- Коллекции , изменения DOM(добавлены и удалены поля) теряются.Значения полей, которые уже существуют при первой загрузке страницы, сохраняются.
- Скрытые поля , значения полей сохраняются, изменения в DOM теряются.
Браузер сохраняет DOM при загрузке страницы, не сохраняет изменения DOM, но сохраняет изменения в полях формы, которые были загружены при загрузке страницы.
Это приводит к ситуации, когда формы частично восстанавливаются, когданажата кнопка возврата браузера.В случае скрытых полей это может привести к тому, что DOM не будет отображать правильное значение скрытого поля, лежащего в основе.
Я хочу создать ситуацию, в которой либо все значения и DOM-изменениясохраняются или нет .При поиске в Интернете я нашел четыре возможных решения:
Настройка заголовков кэша, см. Как управлять кэшированием веб-страниц во всех браузерах? .Кажется, не решает мою проблему.
Добавьте unload -вент на мою страницу, чтобы предотвратить кэширование.Кажется, не решает мою проблему.
Добавьте autocomplete="off" мою форму или определенные поля.Это работает, все изменения отменяются при нажатии кнопки назад браузера.К сожалению, это убивает всю функцию автозаполнения, которая может быть довольно раздражающей для пользователя.Тем не менее, это может стоить компромисса.
Сохраните все изменения в localStorage или куки и добавьте некоторую логику, когда нажата кнопка возврата браузера.Это выглядит немного излишним для этого конкретного проекта, но может быть хорошим решением в будущих проектах.
Я пропускаю некоторые решения?