Как заставить веб-сайт сохранять то, что мы вводим в поле ввода, используя 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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();
}

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