页面刷新时在JavaScript中保存复选标记

我是否可以保存复选框的值，以便在刷新页面时，如果之前选中或未选中复选框，它将相应显示？这是一个待办事项列表应用程序。我一直在搜索和阅读MDN文档，试图找出一个解决方案，任何帮助都将不胜感激。谢谢大家!

JavaScript

var masterList = [];

window.onload = function(){
  masterList = JSON.parse(localStorage.getItem('masterList')); //get data from storage
  if (masterList !== null) { //if data exist (todos are in storage)
    masterList.forEach(function(task){ //append each element into the dom
      var entry = document.createElement('li'); //2
      var list = document.getElementById('orderedList'); //2
      var text = document.createTextNode(task);
      var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'name';
        checkbox.value = 'value';
        checkbox.id = 'id';
        entry.appendChild(checkbox);
      document.getElementById('todoInput').appendChild(entry);
      list.appendChild(entry);
      entry.appendChild(text);
    })
  } else { //if nothing exist in storage, keep todos array empty
    masterList = [];
  }
}

function addToList(){

  var task = document.getElementById('todoInput').value;
  var entry = document.createElement('li'); //2
  var list = document.getElementById('orderedList'); //2
  var text = document.createTextNode(task);
  var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.name = 'name';
    checkbox.value = 'value';
    checkbox.id = 'id';
    entry.appendChild(checkbox);
  document.getElementById('todoInput').appendChild(entry);
  list.appendChild(entry);
  entry.appendChild(text);

  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

您可能需要cookies（

document.cookie

）。看看：

但是要小心。真奇怪

---

您需要自己处理复选框的更改事件并保存数据，可能保存在localStorage中。它可以是具有复选框名称和选中状态的键值对数组

---

在表单加载回发后，将数据返回，并从以前保存的数据恢复复选框的状态。

很抱歉延迟，但有点复杂

如果你想知道我在这里做了什么，我已经改变了存储TODO的方法。它过去只是一个基本数组

['1'，'2'，'3']

。现在它是一个对象数组：

[{todo:'one'，isChecked:false}，{todo:'one'，isChecked:false}]

选中指定复选框时，事件侦听器将更改指定对象的

isChecked

键的值（对应于单击的复选框），并将数据存储在本地存储器中

var主列表=[]；
window.onload=函数（）{
masterList=JSON.parse（localStorage.getItem（'masterList'）；//从存储器获取数据
if（masterList！==null）{//如果数据存在（TODO在存储器中）
map（函数（任务）{//将每个元素追加到dom中
var entry=document.createElement（'li'）；//2
var list=document.getElementById（'orderedList'）；//2
var text=document.createTextNode（task.todo）；
var checkbox=document.createElement（'input'）；
checkbox.type='checkbox'；
checkbox.name='name'；
checkbox.value='value'；
checkbox.id='id'；
checkbox.className='x'；
checkbox.checked=task.isCheckboxChecked；
entry.appendChild（复选框）；
document.getElementById（'todoInput'）.appendChild（条目）；
列表。追加子项（条目）；
条目.appendChild（文本）；
})
}否则{//如果存储中不存在任何内容，请将todos数组保持为空
主列表=[]；
}
var复选框=document.getElementsByClassName（'x'）；
Array.from（复选框）.forEach（（v，i）=>v.addEventListener（'click'，function（））{
主列表[i]。isCheckboxChecked==false？主列表[i]。isCheckboxChecked=true：主列表[i]。isCheckboxChecked=false；
setItem（'masterList'，JSON.stringify（masterList））；
}));
}
函数addToList（）{
var task=document.getElementById（'todoInput'）.value；
var entry=document.createElement（'li'）；//2
var list=document.getElementById（'orderedList'）；//2
var text=document.createTextNode（任务）；
var checkbox=document.createElement（'input'）；
checkbox.type='checkbox'；
checkbox.name='name'；
checkbox.value='value'；
checkbox.id='id'；
checkbox.className='x'；
entry.appendChild（复选框）；
document.getElementById（'todoInput'）.appendChild（条目）；
列表。追加子项（条目）；
条目.appendChild（文本）；
var obj={}；
obj.todo=任务；
obj.isCheckboxChecked=false；
主列表推送（obj）；
setItem（'masterList'，JSON.stringify（masterList））；
console.log（任务）；
控制台日志（主列表）；
clearInput（）；
var复选框=document.getElementsByClassName（'x'）；
console.log（Array.from（复选框））
Array.from（复选框）.forEach（（v，i）=>v.removeEventListener（'click'，function（））{
主列表[i]。isCheckboxChecked==false？主列表[i]。isCheckboxChecked=true：主列表[i]。isCheckboxChecked=false；
}));
Array.from（复选框）.forEach（（v，i）=>v.addEventListener（'click'，function（））{
主列表[i]。isCheckboxChecked==false？主列表[i]。isCheckboxChecked=true：主列表[i]。isCheckboxChecked=false；
setItem（'masterList'，JSON.stringify（masterList））；
}));
}
函数clearInput（）{
todoInput.value=“”；
}

发布整个代码（：您可以使用

localStorage

保存复选框的值（假设浏览器允许）。请发布您的所有代码，以便我们查看哪些代码不起作用。我已发布了所有代码，但找不到保存复选框信息的起点。我是否必须创建新函数，还是希望将其添加到现有函数中？有关使用

localStorage

…的良好基础教程，请参阅您知道如何设置和检索值。@bemon您得到了很好的答案还是我应该添加一个？感谢您今天的帮助。您对我今天学习JavaScript非常有帮助。不用担心“延迟”，我非常感谢您的帮助。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <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>
</html>

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;
}