Как сохранить значения полей формы HTML в localStorage с помощью JavaScript?

Question

Мне нужно получить данные из формы HTML и сохранить их в localStore, но у меня возникают некоторые проблемы при попытке это сделать.

Давайте сделаем короткий пример:

<form class="w3-container" id="form"> 
<p><label>Name</label><input class="w3input" type="text" id="name"></p>
<p><label>Adress</label><input class="w3-input" type="text" id="adress"></p>
<p><label>Number</label><input class="w3-input" type="text" id="number"></p>
<button class="w3-button w3-blue">Submit</button>
</form>

Тогда код JavaScript:

localStorage.setItem("name", document.getElementById("name").value);
localStorage.setItem("adress", document.getElementById("adress").value);
localStorage.setItem("number", document.getElementById("number").value);  

Я пробовал разные способы сделать это, но, похоже, ничего не работает. Чего мне не хватает?

Answer 1

В качестве альтернативы вы можете добавить Event Listener .
addEventListener vs onclick

Answer 2

Внутри <script></script> тегов или внешнего js-файла,

1. Получить элемент формы: const form = document.getElementById('form');

2. Добавить слушателя кпрослушайте событие submit и сохраните ваши значения:

   form.addEventListener('submit', () => {
     localStorage.setItem("name", document.getElementById("name").value);
     localStorage.setItem("adress", document.getElementById("adress").value);
     localStorage.setItem("number", document.getElementById("number").value);
   })
   

Вы должны избегать использования встроенного JavaScript (если вы не используете фреймворк, например реагировать (тогда он даже не является действительно встроенным)).

Answer 3

Если вы пытаетесь сохранить данные в localStorage при нажатии кнопки «Отправить», ваш код должен выглядеть следующим образом.

function onSubmit() {
  localStorage.setItem("name", document.getElementById("name").value);
  localStorage.setItem("adress", document.getElementById("adress").value);
  localStorage.setItem("number", document.getElementById("number").value);
}

<form class="w3-container" id="form">
  <p><label>Name</label><input class="w3input" type="text" id="name"></p>
  <p><label>Adress</label><input class="w3-input" type="text" id="adress"></p>
  <p><label>Number</label><input class="w3-input" type="text" id="number"></p>
  <button class="w3-button w3-blue" onclick="onSubmit()">Submit</button>
</form>