установите cook ie из формы при вводе или отправке и покажите значение cook ie в html на той же странице

Question

Я хотел бы установить повара ie для имени, которое посетитель вводит в форму моего сайта. После отправки введенное имя должно быть показано на той же странице в html. Повар ie должен храниться, пока посетитель просматривает веб-сайт, независимо от того, какая страница последнего. В идеале повар ie хранится на местном складе.

Скрипты интегрированы в код html с помощью фрагментов (то есть xyzscripts)

Я также пытался установить и получить повара ie с помощью php. Похоже, что для обновления сайта и отображения имени (cook ie) на сайте необходимо 2x refre sh. Как JS newb ie ваша помощь будет принята с благодарностью.

Вот что я попробовал до сих пор:

Форма

<div class="folmula">
    <form id="sessie_datum" class="mrsuc" action="" method="post">
    <input class="aantal_alpincenter" name="personen_aantal" type="text" value="" placeholder="Mr/s name or alias..." />
    <input class="aantal" type="submit" value="CALL ME BY MY NAME" /></form>
<div style="clear: both;"></div>
</div>

Установить Cook ie

<script>
(function (){
  'use strict';

  var aantal = document.querySelector('.aantal')

  function setLocalStorage(){
     aantal.addEventListener('click', () => {
      localStorage.setItem('aantal','Keanu Reeves')
    })
  }
  setLocalStorage()

}());
</script>

Get Cook ie

<script>
function getLocalStorage() {
  document.getElementById("result").innerHTML = localStorage.getItem("aantal");
}
</script>

Что нужно изменить, чтобы это работало?