我想将第一个复选框的数据保存到会话存储，我想检索数据并在从会话存储加载时将其设置到第二个页面。
第一个HTML
<body>
<label for="1">
<input type="checkbox" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="checkbox" name="num" id="2" value="2" >2
</label>
<label for="3">
<input type="checkbox" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="checkbox" name="num" id="4" value="4" >4
</label>
<button onclick="saveSession()">save</button>
<script type="text/javascript">
function saveSession() {
// I want to save the value of the radio button to sessionStorage here
}
</script>
</body>在我的第二个HTML中，我想检索这些数据，并将单选按钮的值设置为相同。
第二个HTML
<body onload="type()">
<label for="1">
<input type="checkbox" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="checkbox" name="num" id="2" value="2" >2
</label>
<label for="3">
<input type="checkbox" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="checkbox" name="num" id="4" value="4" >4
</label>
<script type="text/javascript">
function type() {
//I want to get the data with sessionStorage.getItem()
}
</script>
</body>提前感谢。
让我们一步一步来做这件事。
要从复选框中获取值，可以执行以下操作：
const value = document.querySelector('input[type="checkbox"]:checked').value
要将其保存在存储器上，请执行以下操作：
localStorage.setItem('num-value', value)
为第一页包装：
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))
现在，在第二页中，为了获得它们的值，您必须进行相同的转换，但现在从JSON转换为字符串。
const checkValues = JSON.parse(localStorage.getItem('num-value'))
然后，最后用正确的值更新第二页的复选框：
document
.querySelectorAll('input[type="checkbox"]')
.forEach((input, index) => input.checked = checkValues[index]) // you get the value based on the index
请注意，我正在使用文档中的一些函数
我建议您深入了解document.querySelector和document.querySelect或All