Итак, вот концепция:
Я делаю простой веб-сайт с полем ввода, и веб-сайт будет сохранять то, что мы печатаем, в локальном хранилище и отображать его в теле веб-сайта. Мы можем изменить текст в поле ввода в любое время, и сайт автоматически обновится.
ожидаемый результат
Ввод в поле ввода обновит сайт
Фактический результат
Ничего не произошло
Вот код:
<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>
Заранее спасибо.
Кроме того, элементы <p>
не имеют свойства value
. Вы наверное имели ввиду textContent
?
Вы не обновляете данное имя на экране, вы просто обновляете его в локальном хранилище. Вам нужно написать следующее:
<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.
К сожалению, это не сработало.
Вы правы, но теперь это работает
Я думаю, у вас есть две проблемы.
Во-первых, вы не обновляете элемент после установки 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();
}
Единственное, что происходит при нажатии на кнопку, — это сохранение в локальном хранилище. Вы не обновляете
output
при нажатии на кнопку. Это происходит только один раз при загрузке страницы.