Html как сохранить данные?

Для черновика подходит, а окончательную заметку буду экспортировать.

Разные порты у локального сервера объяснили пропавший текст.

Сам HTML не сохраняет введённый текст обратно в файл. Для небольшого черновика в одном браузере подойдёт JavaScript и localStorage. Найдите поле после построения документа, прочитайте сохранённую строку и подпишитесь на событие input.

const note = document.querySelector('#note');
try {
  note.value = localStorage.getItem('draft') ?? '';
} catch (error) {
  console.warn('Черновик недоступен', error);
}
note.addEventListener('input', () => {
  try {
    localStorage.setItem('draft', note.value);
  } catch (error) {
    console.warn('Не удалось сохранить', error);
  }
});

Пример предполагает существующее поле с id="note" и запуск скрипта после его появления. Для пользовательского интерфейса вместо одной записи в консоль добавьте понятное сообщение о неудаче: человек не должен считать заметку сохранённой, если запись в хранилище была отклонена.

localStorage хранит строки в пределах origin и профиля браузера. Страница с другим адресом, портом или протоколом может получить другое хранилище. Проверяйте учебную страницу через HTTP-сервер: поведение для локальных файлов file: не следует считать переносимой гарантией.

После обычного закрытия вкладки данные могут сохраняться, но это не бессрочная резервная копия. Пользователь способен очистить данные сайта, браузер может запретить хранилище, а приватный режим не предназначен для такого постоянного архива. Синхронизации с другим компьютером этот пример не создаёт.

Храните здесь небольшой некритичный черновик. Для важных материалов предусмотрите явный экспорт или сохранение на сервере с понятным результатом операции. Не записывайте секреты, доступ к которым не должны получать скрипты, выполняющиеся в контексте этой страницы.

Для небольшого черновика в том же браузере можно использовать localStorage через JavaScript. Например, после получения поля note задайте note.value = localStorage.getItem('draft') ?? '', а при вводе сохраняйте localStorage.setItem('draft', note.value). Выполняйте операции с обработкой ошибок: хранилище может быть недоступно или переполнено.

Это сохранение относится к origin страницы и профилю браузера. Оно не синхронизирует заметку между устройствами и не переписывает исходный HTML. Очистка данных сайта может удалить черновик, а приватный режим имеет отдельные ограничения.

Проверяйте пример через локальный HTTP-сервер: для адресов file: поведение localStorage не определено единообразно. Не используйте такой черновик как единственную копию важной информации и не храните там секреты, которым не должны иметь доступ скрипты этой страницы.