Динамически созданные HTML-теги нельзя сохранить просто обновлением страницы, потому что, когда страница загружается заново, браузер обрабатывает изначальный HTML-код. Однако, есть несколько способов, чтобы сохранить изменения:
1. Хранение данных в LocalStorage. Этот механизм позволяет веб-страницам хранить данные пары ключ-значение в браузере пользователя. Вы можете сохранять созданные элементы в LocalStorage. Но помните, что LocalStorage хранит только строки, поэтому вам потребуется преобразовать свои данные в строки (например, используя JSON.stringify) перед их сохранением и парсингом (например, используя JSON.parse) при извлечении данных.
2. Использование базы данных. Если вам нужно сохранить информацию для использования в других сеансах или других пользователями, то рекомендуется использовать серверную базу данных. Это гораздо надежнее, чем LocalStorage, и позволяет хранить больше данных. Вам потребуется сервер и серверный код, который обработает добавление, изменение и получение данных из базы данных.
3. Использование Cookies. Вы теоретически можете сохранить данные в Cookies, но это довольно ограниченное и неудобное решение для большинства современных приложений.
4. Использование IndexedDB - это API для работы с большими объемами данных на стороне клиента. Это может быть хорошим надежным решением, если вам нужно хранить большие объемы данных, включая файлы/блобы.
Наконец, нужно понимать, что в любом из этих решений вам все еще потребуется функция, которая будет обрабатывать данные из хранилища и воссоздавать HTML-элементы на странице при загрузке.
Примечание: использование базы данных и IndexedDB может быть избыточным или неприменимым для некоторых проектов, и лучше всего подходит для более крупных или сложных веб-приложений.