Блог

Главная - Вопросы по программированию - localStorage GetItem не определен

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

#javascript #html #local-storage

#javascript #HTML #локальное хранилище

Вопрос:

У меня возникли некоторые проблемы с извлечением значений из 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>

Но он выводит «неопределенный» на экран…

Комментарии:

1. Правильно ли он сохраняется в локальном хранилище?

2. Для меня выглядит нормально.

3. Попробуйте заменить onsubmit="callme()" на onsubmit="callme(); return false;" и увидите?

4. Он передается в URL ( localhost:3000/formulaire/ … ), но если i console.log(localStorage) , он пуст, и на экране выводится значение null

Ответ №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";
};

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