[Malleys]

Lefseq, я ответил на ваш вопрос...

Malleys,
Код рабочий, но нужно кое что исправить. Буду признателен, если поможете.

1. Нужно убрать на страницах кнопку/функцию "Забудь обо мне!"
2. Надо чтобы введенные пользователем имя (name) и фамилия (family-name) выводились на странице next.html по отдельности, чтобы можно было поставить их в разные части страницы.

Тогда страница с формой выглядит так...

<section id="user-greeting">
	<form action="next.html">
		<label>
			Имя
			<input autocomplete="name" name="name" required>
		</label>
		<label>
			Фамилия
			<input autocomplete="family-name" name="familyName" required>
		</label>
		<button>Запомнить</button>
	</form>
</section>
<script>
	(function main() {
		var form = document.querySelector("#user-greeting > form");
		
		form.addEventListener("submit", function(event) {
			event.preventDefault();
			var data = new FormData(form);
			localStorage.name = JSON.stringify(Object.fromEntries(data));
			form.submit();
		});
	})();
</script>

Т. е. форму по любому нужно отправить, только перед отправкой надо сохранить данные формы в локальном хранилище. Адрес на который нужно перейти, указывается в атрибуте action. На странице next.html вы можете работать со значениями из локального хранилища.

Тогда страница next.html может выглядеть так...

<h3>Привет, <span data-field="name"></span>, добро пожаловать на сайт!
</h3>
<p>Привет, <span data-field="name"></span> <span data-field="familyName"></span>. Мы вас ждали.</p>
<p>Как видите, <span data-field="name"></span>, страница называет вас
  по имени. Ваше имя (<i data-field="name"></i>) и фамилия (<i data-field="familyName"></i>)
  были сохранены в локальном хранилище, поэтому теперь их можно было использовать.
  </p>
  
  <button onclick="delete localStorage.name; location.reload();">Забыть меня</button>
  
<script>
	document.addEventListener("DOMContentLoaded", function() {
    if("name" in localStorage === false) return location.replace("./");
    const data = JSON.parse(localStorage.name || "{}");
    
    for(const [key, value] of Object.entries(data)) {
      for(const node of document.querySelectorAll(`[data-field="${key}"]`)) {
        node.textContent = value;
      }
    }
	});
</script>

В <span data-field="name"></span> подставляется значение из отправленной формы. Значению data-field соответствует имя поля из формы.

Рабочий пример на основе этого кода вы можете посмотреть тут... https://charm-launch.glitch.me/localstorage

Для этого достаточно:

А зачем вам атрибут required без формы? Оно так не работает!

ваша форма нафиг не нужна

Почему вы решили, что данные формы нужны только для того, чтобы их отправить обрабатывать в текстовый препроцессор PHP?

Форма нужна для проверки. Форма нужна для связности, чтобы пользователь мог по порядку заполнить поля без необходимости поиска следующего поля. Это громадное улучшение UX.

А уж по каким правилам проверять, это уже не мне решать, тем более, что по логике все это похоже на бред.

Всё уже стандартизировано, никаких костылей изобретать не нужно. (атрибут pattern)

А это полная хрень

Мир не ограничен Windows