如何从本地存储中检索数据并将其推送到 innerHTML 中?

Question

我正在尝试从本地存储中检索数组并将其显示在内部HTMl中。但是每次我刷新时，我的 innerHTML 中都没有任何东西。尽管该数组在浏览器 LocalStorage 中可见。

document.getElementById("submit").addEventListener("click", arrpush);
var arr = JSON.parse(localStorage.getItem(arr)) || [];
function arrpush(){
arr.push(document.getElementById('text').value);
document.getElementById("items").innerHTML = ""; 
localStorage.arr = JSON.stringify(arr);
display();
}
function display(){
document.getElementById("items").innerHTML = "";
for(i=0;i<arr.length;i++){
document.getElementById("items").innerHTML += `<li>${arr[i]}</li>`;   
}   
}

Answer 1

在这一行中，您试图获得arr而不是"arr"。"arr"是本地存储元素的名称。arr是"arr"值的数组。

var arr = JSON.parse(localStorage.getItem(arr)) || []; //getItem("arr")

此外，您必须在加载后调用显示函数

window.onload = function(){
display();
}