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

【问题标题】：How to Save the values of check boxes to session storage and retrieve them on the next page如何将复选框的值保存到会话存储并在下一页检索它们
【发布时间】：2021-05-19 12:56:53
【问题描述】：

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

第一个 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>

提前致谢。

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

让我们一步一步来。

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

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.querySelectorAll

【讨论】：

我如何使用第二页中的值来检查相应的框？
嗯，您可以尝试执行以下操作：document.querySelector(`input[value="${ value }"]`).checked = true;，该值是您从 localStorage 获得的值
这只会检查我选择的选项中的 1 个，而不是全部。
是的，当然，querySelector 仅适用于一个元素，为了帮助您，我将对该问题进行编辑
感谢您在最后一行添加index+1 效果更好。

【解决方案2】：

一般是not a good idea 使用内联事件处理器。这是一个使用Event Delegation 的sn-p（使用localStorage 假人，因为SO 沙盒不允许localStorage）。

有关完整的工作示例，请参阅 this stackblitz snippet。

document.addEventListener("click", handle);
const localStore = localStoreDummy();

function handle(evt) {
  if (evt.target.nodeName === "BUTTON") {
    //                    ∟ handle the button only
    const checkedValues = [...document.querySelectorAll(`[type="checkbox"]:checked`)]
    //                     ∟ convert all checked checkboxes to Array
      .reduce((acc, cb) => ({ ...acc,
        [cb.id]: cb.value
      }), {});
    //  ∟ and reduce to an object (key: checkbox id, value: checkbox value))  
    log(`Current storage values: ${localStore.getItem("checked-num-boxes")}`);
    //           ∟ when not not in sandbox: use 'localStorage'
    // saving the checkboxes states ...
    localStore.setItem("checked-num-boxes", JSON.stringify(checkedValues));
    log(`New storage values (saved): ${localStore.getItem("checked-num-boxes")}`, 1);
    document.querySelectorAll(`[type="checkbox"]`).forEach(cb => cb.checked = false);
    log("All checkboxes cleared", 1);
    log(`Will remember state after <span>10 seconds</span>`, 1);
    return timedRetrieval(10);
  }
}

function timedRetrieval(seconds) {
  if (seconds > 0) {
    document.querySelector(".exmple span").textContent = 
      `${seconds} second${seconds == 1 ? "" : "s"}`;
    return setTimeout(() => timedRetrieval(seconds - 1), 1000);
  }
  // retrieve the checkboxes checked state from storage
  Object.keys(JSON.parse(localStore.getItem("checked-num-boxes")))
     .forEach(key => document.querySelector(`#${key}`).checked = true);
  log(`Checkboxes state reset from storage (values: ${localStore.getItem("checked-num-boxes")})`);
  
}

function log(txt, append) {
  const report = document.querySelector(".exmple");
  report.innerHTML = append ? `${report.innerHTML}<br>${txt}` : txt;
}

function localStoreDummy() {
  let items = {};
  return {
    setItem(name, value) {
      items[name] = value;
    },
    getItem(name) {
      return items[name] || "not set yet";
    }
  }
}

.exmple {color: green}
.exmple span {font-weight: bold;}

<label for="1">
<input type="checkbox" name="num" id="cb1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="checkbox" name="num" id="cb2" value="2" >2
</label>
<label for="3">
<input type="checkbox" name="num" id="cb3" value="3" >3
</label>
<label for="4">
<input type="checkbox" name="num" id="cb4" value="4" >4
</label>
<button>save</button>
<pre class="exmple"></pre>

【讨论】：