Question

我已经构建了一个带有复选框的动态阅读图表，以便该人查看他们阅读的章节。

如何保存已检查的页面，以便下次重新打开或重新加载页面时，不会取消选中已检查的页面？

这就是我在HTML文档中设置复选框的方式：

      <input type ='checkbox' class = 'check'>Chapter 1
      <input type ='checkbox' class = 'check'>Chapter 2 
      <input type ='checkbox' class = 'check'>Chapter 3
      <input type ='checkbox' class = 'check'>Chapter 4
      <input type ='checkbox' class = 'check'>Chapter 5
      <input type ='checkbox' class = 'check'>Chapter 6
      <input type ='checkbox' class = 'check'>Chapter 7

Answer 1

您可以在JavaScript中使用localStorage方法：

let checkedChapters = [...];
localStorage.setItem('completedChapters', JSON.strignify(checkedChapters));

之后，您可以在应用中获取已保存的数据。

let checkedChapters = JSON.parse(localStorage.getItem('completedChapters'));

我们使用JSON.parse（）和JSON.stringify（），因为所有保存的项目都有'string'类型

Answer 2

要执行此操作，首先需要在输入中添加事件列表器。

<input type ='checkbox' class = 'check'  name="check1" onclick='handleClick(this);'>Chapter 1
<input type ='checkbox' class = 'check'   name="check2" onclick='handleClick(this);'>Chapter 2

当您单击复选框时，函数handleClick将执行。

function handleClick(element){
  if(element.checked){
    localStorage.setItem(element.name, 'true');
  }else{
    localStorage.removeItem(element.name);
  }
}

此功能在浏览器存储中添加/删除元素（您可以在元素检查器的Aplication＆gt; LocalStorage上查看）。
现在，要在页面加载时自动检查输入，您需要添加另一个事件列表器。

window.onload = function(){
  var checkboxList = document.querySelectorAll(".check");
  for(var i=0; i<checkboxList.length; i++){
    if(localStorage.getItem(checkboxList[i].name) == "true"){
      checkboxList[i].checked = true;
    }
  }
}

此功能遍历您的输入并检查localStorage上是否有他的名字。

保存复选框

2 个答案: