所以這里的概念：
我正在制作一個簡單的網站，其中有一個輸入框，該網站會將我們輸入的內容保存到 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>
提前致謝。
uj5u.com熱心網友回復：
我認為你有兩個問題。
第一個是設定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();
}
uj5u.com熱心網友回復：
您沒有更新螢屏上的給定名稱，您只是在 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>
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 是否完全具有“名稱”屬性。
正如@David 所說，元素沒有“值”屬性，<p>所以我將其更改為 textContent。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/476394.html
標籤：javascript html 本地存储