为什么我的复选框没有被勾选？

Question

我一直在尝试创建一个完成跟踪器，我可以在其中使用复选框来跟踪我必须完成的任务。我希望复选框保持选中状态。但是，我目前的代码唯一可以做到这一点的地方是 codepen.io 。当我使用实时服务器打开或使用 vscode 中的扩展在浏览器中打开时，它不记得我已经选中了这些框。我该如何解决这个问题？

这是我的javascript文件（app.js）：

let boxes = document.getElementsByClassName('box').length;

function save() {   
  for(let i = 1; i <= boxes; i++){
      var checkbox = document.getElementById(String(i));
    localStorage.setItem("checkbox" + String(i), checkbox.checked); 
  }
}

//for loading
for(let i = 1; i <= boxes; i++){
  if(localStorage.length > 0){
    var checked = JSON.parse(localStorage.getItem("checkbox" + String(i)));
    document.getElementById(String(i)).checked = checked;
  }
}
window.addEventListener('change', save);

这是 html 文件：

<script src="app.js"></script>
<input type="checkbox" id="1" class="box">checkbox1</input><br>