Javascript使用LocalStorage保存多个复选框_Javascript_Html_Checkbox_Local Storage

Javascript使用LocalStorage保存多个复选框

javascript html checkbox

Javascript使用LocalStorage保存多个复选框,javascript,html,checkbox,local-storage,Javascript,Html,Checkbox,Local Storage,我正在尝试使用localstorage保存复选框，以便在刷新浏览器时，复选框将保持不变，直到单击删除按钮以下是我迄今为止所尝试的： function save(){ var checkbox = document.getElementById('ch1'); localStorage.setItem('ch1', checkbox.checked); } function load(){ var checked = JSON.parse(localStorage.getItem('c

我正在尝试使用localstorage保存复选框，以便在刷新浏览器时，复选框将保持不变，直到单击删除按钮

以下是我迄今为止所尝试的：

function save(){
var checkbox = document.getElementById('ch1');
localStorage.setItem('ch1', checkbox.checked);
}

function load(){    
var checked = JSON.parse(localStorage.getItem('ch1'));
document.getElementById("ch1").checked = checked;
}

function reload(){
location.reload();
localStorage.clear()
}

load();

<body onload="load()">
<input type="button" id="ReserveerButton1" value="save" onclick="save()"/>
<input type="button" id="Wisbutton1" value="delete" onclick="reload()"/>
<input type="checkbox" id="ch1"></input>

//additional checkboxes
<input type="checkbox" id="ch1"></input>
<input type="checkbox" id="ch1"></input>
<input type="checkbox" id="ch1"></input>

</body>

函数保存（）{
var checkbox=document.getElementById（'ch1'）；
setItem（'ch1'，checkbox.checked）；
}
函数加载（）{
var checked=JSON.parse（localStorage.getItem（'ch1'）；
document.getElementById（“ch1”）.checked=checked；
}
函数重载（）{
location.reload（）；
localStorage.clear（）
}
加载（）；
//其他复选框

这将成功保存一个复选框，但我想保存多个复选框。因此，我假设我需要在函数save（）中添加一个循环

函数保存（）{
var checkbox=document.getElementById（'ch1'）；
对于（i=0；i


然而，我有点纠结于如何通过load（）调用获取这些检查值
干杯
您不能有多个相同的ID，它们必须是唯一的
那么，你喜欢这个吗
function save(){
  // Get all checkbox inputs
  var inputs = document.querySelectorAll('input[type="checkbox"]');
  var arrData = [];
  // For each inputs...
  inputs.forEach(function(input){
    // ... save what you want (but 'ID' and 'checked' values are necessary)
    arrData.push({ id: input.id, checked: input.checked });
  });
  // Save in localStorage
  localStorage.setItem('inputs', JSON.stringify(arrData));

  console.log(JSON.stringify(arrData));
  // [
  //   {
  //     'id': 'ch1',
  //     'checked': false  // or true
  //   },
  //   ... and so on
  // ]
}

function load(){
  var inputs = JSON.parse(localStorage.getItem('inputs'));
  // For each inputs...
  inputs.forEach(function(input){
    // Set the 'checked' value
    document.getElementById(input.id).checked = input.checked;
  });
}


<input type="checkbox" id="ch1"></input>
<input type="checkbox" id="ch2"></input>
<!-- And so on -->

函数保存（）{
//获取所有复选框输入
var inputs=document.querySelectorAll（'input[type=“checkbox”]”）；
var-arrData=[]；
//对于每个输入。。。
输入。forEach（函数（输入）{
//…保存所需内容（但需要“ID”和“选中”值）
arrData.push（{id:input.id，checked:input.checked}）；
});
//保存在本地存储中
setItem（'inputs'，JSON.stringify（arrData））；
log（JSON.stringify（arrData））；
// [
//   {
//'id'：'ch1'，
//“选中”：false//或true
//   },
//……等等
// ]
}
函数加载（）{
var inputs=JSON.parse（localStorage.getItem（'inputs'）；
//对于每个输入。。。
输入。forEach（函数（输入）{
//设置“选中”值
document.getElementById（input.id）.checked=input.checked；
});
}
不能在同一页上使用多个相同的id，请使用类
function save(){
  // Get all checkbox inputs
  var inputs = document.querySelectorAll('input[type="checkbox"]');
  var arrData = [];
  // For each inputs...
  inputs.forEach(function(input){
    // ... save what you want (but 'ID' and 'checked' values are necessary)
    arrData.push({ id: input.id, checked: input.checked });
  });
  // Save in localStorage
  localStorage.setItem('inputs', JSON.stringify(arrData));

  console.log(JSON.stringify(arrData));
  // [
  //   {
  //     'id': 'ch1',
  //     'checked': false  // or true
  //   },
  //   ... and so on
  // ]
}

function load(){
  var inputs = JSON.parse(localStorage.getItem('inputs'));
  // For each inputs...
  inputs.forEach(function(input){
    // Set the 'checked' value
    document.getElementById(input.id).checked = input.checked;
  });
}


<input type="checkbox" id="ch1"></input>
<input type="checkbox" id="ch2"></input>
<!-- And so on -->