Javascript 在OL中的页面加载/刷新时显示本地存储_Javascript_Html_Arrays

Javascript 在OL中的页面加载/刷新时显示本地存储

javascript html arrays

Javascript 在OL中的页面加载/刷新时显示本地存储,javascript,html,arrays,Javascript,Html,Arrays,我一直在尝试创建一个待办事项列表，并不断遇到不同的问题。现在我正试图从本地存储中提取阵列，因此当我刷新浏览器时，它将显示待办事项列表。我试过了我知道我需要按照 localStorage.getItem 但我不知道如何着手这样做。我想我需要把它放到一个不同的函数中，然后在JavaScript的末尾调用这个不同的函数。我还认为我需要为此使用for循环。我想我可能需要重做我当前的JavaScript，但我不确定从这里走到哪里 JavaScript var masterList = []; func

我一直在尝试创建一个待办事项列表，并不断遇到不同的问题。现在我正试图从本地存储中提取阵列，因此当我刷新浏览器时，它将显示待办事项列表。我试过了我知道我需要按照

localStorage.getItem

但我不知道如何着手这样做。我想我需要把它放到一个不同的函数中，然后在JavaScript的末尾调用这个不同的函数。我还认为我需要为此使用for循环。我想我可能需要重做我当前的JavaScript，但我不确定从这里走到哪里

JavaScript

var masterList = [];

function addToList(){
  var task = document.getElementById('todoInput').value;
  var entry = document.createElement('li'); //2
  var list = document.getElementById('orderedList'); //2
  entry.appendChild(document.createTextNode(task)); //2
  list.appendChild(entry); //2

  masterList.push(task);

  localStorage.setItem('masterList', JSON.stringify(masterList));

  console.log(task);
  console.log(masterList);
  clearInput();
 }

function clearInput() {
    todoInput.value = "";
}

console.log((localStorage.getItem('masterList')));

HTML

您必须在文档加载时调用一个函数，该函数将从

localStorage

获取

todo

列表。如果它不存在，

主列表

将成为一个空数组，并准备在其中存储

TODO

注意：检查它是否工作，因为cors堵塞，所以我无法测试它

var主列表；
window.onload=函数（）{
masterList=JSON.parse（localStorage.getItem（'masterList'）；//从存储器获取数据
if（masterList！==null）{//如果数据存在（TODO在存储器中）
forEach（函数（v）{//将每个元素追加到dom中
var任务=v；
var entry=document.createElement（'li'）；//2
var list=document.getElementById（'orderedList'）；//2
entry.appendChild（document.createTextNode（task））；//2
list.appendChild（条目）；//2
})
}否则{//如果存储中不存在任何内容，请将todos数组保持为空
主列表=[]；
}
}
函数addToList（）{
var task=document.getElementById（'todoInput'）.value；
var entry=document.createElement（'li'）；//2
var list=document.getElementById（'orderedList'）；//2
entry.appendChild（document.createTextNode（task））；//2
list.appendChild（条目）；//2
主列表推送（任务）；
setItem（'masterList'，JSON.stringify（masterList））；
console.log（任务）；
控制台日志（主列表）；
clearInput（）；
}
函数clearInput（）{
todoInput.value=“”；
}

@bemon这不是很有帮助的回答，为什么不起作用？您在控制台中是否有任何错误？对不起，我不是有意对回复没有帮助。当我更改代码并运行它时，我没有显示任何错误，它只是没有做任何与以前不同的事情。它仍然在控制台中显示所有内容，但屏幕上没有出现任何错误，我也没有在控制台或任何地方看到任何错误。现在它确实起作用了，我将仔细查看代码中的具体内容。非常感谢您的帮助和帮助@贝蒙，我已经在每个步骤中添加了说明。非常感谢，我非常感谢您的帮助和说明…谢谢您！

<link href="style.css" rel="stylesheet">
</head>
<body>

  <h1>To Do List:<h1>

    <input id="todoInput" type="text">
    <button type="button" onclick="addToList()">Add Item</button>
    <ol id='orderedList'></ol>

<script src="todo.js"></script>

</body>

ol li {
  background: lightgray;
  text-align: left;
}

ol li:nth-child(odd){
  background: lightblue;
  text-align: left
  text: 10%;
}

input[type=text]{
  width: 20%;
  border: 2px solid black;
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
}

h1{
  text-align: center;
}