localStorage getItem не определено

Question

У меня проблемы с получением значений из localStorage.Я пытаюсь сохранить входные данные и выбрать из формы и использовать его на другой странице после нажатия на кнопку отправить.Вот как выглядит форма:

<form action="thank-you.html" role="form" id="form" data-toggle="validator" method="get" onsubmit="callme()">
    <div class="form-group col-md-6">
    <label for="inputSurfaceDuTerrain">Surface du terrain (Optionnel)</label>
    <div class="input-group">
        <input type="number" class="form-control" id="inputSurfaceDuTerrain" name="inputSurfaceDuTerrain"
        placeholder="Ex. 500" />
        <div class="input-group-append">
        <div class="input-group-text">m²</div>
        </div>
    </div>
    </div>
</form>

И мой JS для этого файла:

function callme() {
    let inputSurfaceDuTerrain = document.getElementById('inputSurfaceDuTerrain');
    localStorage.setItem('inputSurfaceDuTerrain', inputSurfaceDuTerrain.value);
};

На моем другом файле, странице thank-you.html, я хотел быраспечатать введенное значение на экране.Вот мой html & JS:

<p id="inputSurfaceDuTerrain"></p>

<script>
    window.onload = function () {
        document.getElementById('inputSurfaceDuTerrain').innerText = "inputSurfaceDuTerrain, " + localStorage.getItem('inputSurfaceDuTerrain');
    };
</script>

Но он выводит "undefined" на экран ...

Answer 1

Ваша форма отправляется на новую страницу, поэтому вам нужно вручную установить URL.

Измените свою форму на:

<form role="form" id="form" data-toggle="validator">

И добавьте этот JavaScript настраница, на которой он расположен:

document.getElementById("form").addEventListener("submit", callme);
function callme(event) {
    event.preventDefault();
    let inputSurfaceDuTerrain = document.getElementById('inputSurfaceDuTerrain');
    localStorage.setItem('inputSurfaceDuTerrain', inputSurfaceDuTerrain.value);
    window.location.href = "thank-you.html";
};

Теперь это должно работать.