Как заставить веб-сайт сохранять то, что мы вводим в поле ввода, используя localStorage?

Итак, вот концепция:

Я делаю простой веб-сайт с полем ввода, и веб-сайт будет сохранять то, что мы печатаем, в локальном хранилище и отображать его в теле веб-сайта. Мы можем изменить текст в поле ввода в любое время, и сайт автоматически обновится.

ожидаемый результат
Ввод в поле ввода обновит сайт

Фактический результат
Ничего не произошло


Вот код:

<h1>localStorage Test</h1>

<form>
  <label for="name">Your Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <button onclick="saveName()" type="button">Save Name</button>
</form>

<br>

<p id="output"> </p>

<script>
  document.getElementById("output").value = localStorage.getItem("name");
  
  function saveName() {
    var name = document.getElementById("name");
    localStorage.setItem("name", name.value);
  }
</script>

Заранее спасибо.

Единственное, что происходит при нажатии на кнопку, — это сохранение в локальном хранилище. Вы не обновляете output при нажатии на кнопку. Это происходит только один раз при загрузке страницы.

deceze 17.05.2022 15:14

Кроме того, элементы <p> не имеют свойства value. Вы наверное имели ввиду textContent?

David 17.05.2022 15:16
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
2
43
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы не обновляете данное имя на экране, вы просто обновляете его в локальном хранилище. Вам нужно написать следующее:

<h1>localStorage Test</h1>
<form>
  <label for="name">Your Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <button onclick="saveName()" type="button">Save Name</button>
</form>

<br>

<p id="output"> </p>

<script>
  function setName(name){
    document.getElementById("output").textContent = name;
  }

  let currentNameInStoarge = localStorage.getItem("name");
  if(currentNameInStoarge !== null) setName(currentNameInStoarge);
  
  function saveName() {
    var name = document.getElementById("name");
    localStorage.setItem("name", name.value);
    setName(name.value);
  }
</script>

Я также добавил проверку в начале, чтобы проверить, есть ли вообще у localStorage свойство «name». И, как сказал @David, у элемента <p> нет свойства «значение», поэтому я изменил его на textContent.

К сожалению, это не сработало.

KornLS 17.05.2022 15:32

Вы правы, но теперь это работает

Ariel Rotem 17.05.2022 15:35
Ответ принят как подходящий

Я думаю, у вас есть две проблемы.

Во-первых, вы не обновляете элемент после установки localstorage. Это можно сделать, поместив код в функцию и вызвав функцию после обновления значения.

Во-вторых, для отображения текста внутри тега <p> вам нужно использовать innerHTML или, что предпочтительнее, innerText.

См. пример кода ниже

function getName() {
    document.getElementById("output").innerText = localStorage.getItem("name");
}
getName();

function saveName() {
    var name = document.getElementById("name");
    localStorage.setItem("name", name.value);
    getName();
}

Другие вопросы по теме