Javascript 如何将复选框的值保存到会话存储并在下一页检索它们

我希望将第一个复选框的数据保存到会话存储中，并且我希望检索数据并将它们设置为从会话存储加载的第二页

1st HTML

1.
2.
3.
4.
拯救
函数saveSession（）{
//我想在这里将单选按钮的值保存到sessionStorage
}

让我们一步一步来做

要从复选框中获取值，可以执行以下操作：

const value = document.querySelector('input[type="checkbox"]:checked').value

localStorage.setItem('num-value', value)

要将其保存在存储器上，请执行以下操作：

const value = document.querySelector('input[type="checkbox"]:checked').value

localStorage.setItem('num-value', value)

将其包装到第1页：

function saveSession() {
  const value = document.querySelector('input[type="checkbox"]:checked').value
  localStorage.setItem('num-value', value)
}

然后在第二页，我们从存储器中获取它

function type() {
  const value = localStorage.getItem('num-value')
  console.log('value', value) // console it
}

*编辑：

如果要获得多个值，必须执行以下操作

const elements = Array.from(document.querySelectorAll('input[type="checkbox"]'))

const checkValues = elements.map(input => input.checked)

然后，由于它是一个值数组，所以必须将其保存为JSON字符串

localStorage.setItem('num-value', JSON.stringify(checkValues))

现在，在第2页中，为了获得它们的值，您必须进行相同的转换，但现在是从JSON到字符串的转换

const checkValues = JSON.parse(localStorage.getItem('num-value'))

然后，最后用正确的值更新第2页复选框：

document
  .querySelectorAll('input[type="checkbox"]')
  .forEach((input, index) => input.checked = checkValues[index]) // you get the value based on the index

请注意，我正在使用文档中的一些函数
我建议您深入研究一下，通常使用内联事件处理程序。下面是一个代码片段（使用

localStorage

虚拟，因为SO沙箱不允许

localStorage

）

有关完整的工作示例，请参见

document.addEventListener（“单击”，句柄）；
const localStore=localStoreDummy（）；
函数句柄（evt）{
if（evt.target.nodeName==“按钮”）{
//                    ∟ 只操作按钮
const checkedValues=[…document.querySelectorAll（`[type=“checkbox”]：checked`）]
//                     ∟ 将所有选中的复选框转换为数组
.减少（（acc，cb）=>（{…acc，
[cb.id]：cb.value
}), {});
//  ∟ 并简化为一个对象（键：复选框id，值：复选框值））
日志（`Current storage values:${localStore.getItem（“checked num box”）}`）；
//           ∟ 不在沙盒中时：使用“localStorage”
//正在保存复选框状态。。。
setItem（“checked num box”，JSON.stringify（checkedValues））；
日志（`New storage values（saved）：${localStore.getItem（“checked num box”）}`，1）；
document.querySelectorAll（`[type=“checkbox”]`）.forEach（cb=>cb.checked=false）；
日志（“清除所有复选框”，1）；
日志（`将记住10秒后的状态'，1）；
返回时间差（10）；
}
}
函数timedRetrieval（秒）{
如果（秒>0）{
document.querySelector（“.example span”）.textContent=
`${seconds}second${seconds==1？”：“s”}`；
返回setTimeout（（）=>timedRetrieval（秒-1），1000）；
}
//从存储器中检索选中状态的复选框
key（JSON.parse（localStore.getItem（“复选框”））
.forEach（key=>document.querySelector（`${key}`）。checked=true）；
日志（`checkbox state reset from storage（值：${localStore.getItem（“checked num box”）}）`）；
}
函数日志（txt，追加）{
const report=document.querySelector（“.example”）；
report.innerHTML=append？`${report.innerHTML}
${txt}`:txt；
}
函数localStoreDummy（）{
让items={}；
返回{
setItem（名称、值）{
项目[名称]=价值；
},
getItem（名称）{
返回项目[名称]| |“尚未设置”；
}
}
}

.example{color:green}
.example span{font-weight:bold；}

1.
2.
3.
4.
拯救

如何在第二页中使用该值来根据检查框？嗯，您可以尝试执行以下操作：

document.querySelector（`input[value=“${value}]”）。checked=true

，该值是您从LocalStorages获得的值。这只检查我选择的选项中的一个，而不是所有选项。是的，querySelector肯定只适用于一个元素，为了帮助您，我将对该问题进行编辑。感谢您在最后一行添加

索引+1

，效果会更好。