這個問題在這里已經有了答案： 如何在 HTML5 localStorage 中存盤物件 24 個答案 如何在 localStorage 中存盤陣列？[重復] （6個答案） 1 小時前關閉。
問題：
當我輸入內容并單擊發送時，元素被排序為串列<ul><li></li></ul>（好東西），但在重新加載頁面后，資料顯示為字串：one,two,three。
如果在重新加載頁面后您鍵入內容并單擊 SEND，則新專案將作為串列出現在字串下方。
但是，如果您再次嘗試重新加載，您將看到一個新字串。
你不會看到one,two,three,new element的。
但只有：new element。
好像資料只持續了一個會話。
const input = document.getElementById("input");
const btn = document.getElementById("btn");
const container = document.getElementById("container");
// ARRAY
const tasks = [];
// WHEN USER CLICK BUTTON
btn.addEventListener("click", addTask);
// ADD A TASK
function addTask() {
tasks.push(input.value);
let li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
container.appendChild(li);
localStorage.setItem("task", tasks);
}
container.innerText = localStorage.getItem("task");<input type="text" id="input">
<button id="btn">SEND</button>
<ul id="container">
</ul>更新
我嘗試使用stringify()and parse()，但問題仍然存在。重新加載頁面后，串列顯示為字串，舊值消失并被新值替換。
const input = document.getElementById("input");
const btn = document.getElementById("btn");
const container = document.getElementById("container");
// ARRAY
const tasks = [];
// WHEN USER CLICK BUTTON
btn.addEventListener("click", addTask);
// ADD A TASK
function addTask() {
tasks.push(input.value);
let li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
container.appendChild(li);
localStorage.setItem("task", JSON.stringify(tasks));
}
container.innerText = JSON.parse(localStorage.getItem("task"));uj5u.com熱心網友回復：
本地存盤是鍵值存盤
值只能是字串
解決您的問題的想法是改變您的結構JSON.stringify(并恢復它JSON.parse
const input = document.getElementById("input");
const btn = document.getElementById("btn");
const container = document.getElementById("container");
// ARRAY
const tasks = [];
// WHEN USER CLICK BUTTON
btn.addEventListener("click", addTask);
function createLi(value) {
tasks.push(value);
let li = document.createElement("li");
li.appendChild(document.createTextNode(value));
container.appendChild(li);
}
// ADD A TASK
function addTask() {
createLi(input.value);
localStorage.setItem("task", JSON.stringify(tasks));
}
JSON.parse(localStorage.getItem("task")).forEach(task => {
createLi(task);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503702.html
標籤：javascript html 本地存储