本文介绍使用 localstorage 在两个独立 html 页面间传递复选框选中状态：第一页保存用户选择，第二页读取并动态渲染对应内容，无需表单提交或服务端参与。

本文介绍使用 localstorage 在两个独立 html 页面间传递复选框选中状态：第一页保存用户选择，第二页读取并动态渲染对应内容，无需表单提交或服务端参与。

在前端开发中，常需将用户交互状态（如复选框勾选）从一个页面延续到另一个页面。由于浏览器页面间默认不共享 DOM 和 JavaScript 执行环境，直接通过 document 或变量传递不可行。推荐使用 localStorage——它提供跨会话、同源持久化存储能力，且操作简洁、兼容性好（支持 IE8+ 及所有现代浏览器）。

✅ 实现原理简述

• Page 1（设置页）：监听复选框变化，将选中值（如 "red"、"green"）以数组形式存入 localStorage，键名为 'myColors'；
• Page 2（展示页）：页面加载时读取该键值，解析为数组，动态生成对应 .box 元素并插入指定容器（如
  ）；
• 所有状态均以纯客户端方式完成，无网络请求、无 Cookie 依赖、无需后端支持。

? Page 1 示例代码（保存状态）

  <meta charset="utf-8"><title>Page 1: Save Checkbox State</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><div>
    <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
    <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
    <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
  </div>

  <script>
    $(document).ready(function() {
      // 初始化：恢复上次选中状态（可选，提升用户体验）
      const saved = JSON.parse(localStorage.getItem('myColors') || '[]');
      saved.forEach(color => 
        $(`[name="colorCheckbox"][value="${color}"]`).prop('checked', true)
      );

      // 监听变更并同步到 localStorage
      $('input[type="checkbox"]').on('change', function() {
        const val = $(this).val();
        let colors = JSON.parse(localStorage.getItem('myColors') || '[]');

        if (this.checked) {
          if (!colors.includes(val)) colors.push(val);
        } else {
          colors = colors.filter(c => c !== val);
        }

        localStorage.setItem('myColors', JSON.stringify(colors));
      });
    });
  </script>

? Page 2 示例代码（读取并渲染）

  <meta charset="utf-8"><title>Page 2: Display Selected Colors</title><style>
    .box { color: #fff; padding: 20px; margin-top: 20px; }
    .red  { background: #ff0000; }
    .green { background: #228B22; }
    .blue { background: #0000ff; }
  </style><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><div id="selected-colors"></div>

  <script>
    $(document).ready(function() {
      const colors = JSON.parse(localStorage.getItem('myColors') || '[]');

      if (colors.length === 0) {
        $('#selected-colors').html('<p>No color selected yet.');
        return;
      }

      const html = colors.map(color => 
        `<div class="${color} box">You have selected <strong>${color} checkbox so I am here</script>