如何在Google Sites的HTML中保存复选框的选中状态

核心思路 #

用浏览器的localStorage存储复选框的选中状态，页面加载时读取存储的状态恢复选中状态，复选框点击切换时同步更新存储内容。

具体实现步骤 #

1. 调整复选框HTML结构 #

给每个学科对应的复选框加唯一ID，方便后续定位和存储状态：

<!-- 示例：数学学科复选框 -->
<label>
  <input type="checkbox" id="math-checkbox"> 数学
</label>

<!-- 示例：英语学科复选框 -->
<label>
  <input type="checkbox" id="english-checkbox"> 英语
</label>

2. 添加状态存储与恢复的JS代码 #

把以下代码嵌入到Google Sites的代码组件中：

// 页面加载完成后恢复复选框状态
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带ID的复选框
  const checkboxes = document.querySelectorAll('input[type="checkbox"][id]');
  
  checkboxes.forEach(checkbox => {
    // 从localStorage读取对应ID的状态，默认未选中
    const savedState = localStorage.getItem(checkbox.id);
    checkbox.checked = savedState === 'true';
    
    // 监听复选框变化，同步存储状态
    checkbox.addEventListener('change', function() {
      localStorage.setItem(this.id, this.checked.toString());
    });
  });
});

3. 在Google Sites中嵌入代码 #

1. 打开你的Google Sites页面进入编辑模式
2. 点击顶部「插入」→「嵌入」→「嵌入代码」
3. 将上述带复选框的HTML和JS代码合并后粘贴进去，点击「下一步」→「插入」即可

注意事项 #

• 每个复选框的ID必须唯一，避免状态存储冲突
• localStorage是浏览器本地存储，仅在当前用户的当前浏览器生效，不同设备/浏览器不会共享状态
• 若要清除所有存储的状态，可在浏览器控制台执行localStorage.clear()

内容的提问来源于stack exchange，提问作者LinesOfCode