在会话存储中保留多个复选框状态

基础概念

会话存储（Session Storage）是一种Web存储机制，允许网页在用户的浏览器上临时存储数据。与本地存储（Local Storage）不同，会话存储中的数据仅在当前会话期间有效，当页面会话结束（即窗口或标签页关闭）时，数据会被清除。

类型与应用场景

类型

字符串存储：会话存储只能存储字符串类型的数据。
对象存储：可以通过JSON.stringify将对象转换为字符串存储，读取时再通过JSON.parse转换回对象。

应用场景

表单状态保存：用户在填写表单过程中，可以在会话存储中保存当前填写的状态，防止页面刷新导致数据丢失。
多步骤流程：在多步骤的向导或注册流程中，可以使用会话存储来保存每一步的用户输入。
临时数据缓存：对于一些临时性的数据，不需要长期保存，但需要在当前会话中多次使用。

示例代码

假设我们有一个包含多个复选框的表单，我们希望在会话存储中保留这些复选框的状态。

HTML部分

<form id="myForm">
  <input type="checkbox" name="option1" value="Option 1"> Option 1<br>
  <input type="checkbox" name="option2" value="Option 2"> Option 2<br>
  <input type="checkbox" name="option3" value="Option 3"> Option 3<br>
</form>

JavaScript部分

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('myForm');
  const checkboxes = form.querySelectorAll('input[type="checkbox"]');

  // 加载时恢复复选框状态
  checkboxes.forEach(checkbox => {
    const savedState = sessionStorage.getItem(checkbox.name);
    if (savedState === 'true') {
      checkbox.checked = true;
    }
  });

  // 监听复选框变化并保存状态
  form.addEventListener('change', function(event) {
    if (event.target.type === 'checkbox') {
      sessionStorage.setItem(event.target.name, event.target.checked);
    }
  });
});