JavaScript 實現 Checkbox 狀態持久化：頁面刷新後保持選中狀態

需求場景

頁面包含多個 Checkbox，用戶勾選後刷新頁面或重新打開，期望保持原有選中狀態。適用於用戶偏好設置、篩選條件保存等場景。

核心方案：Cookie + 事件委託

利用 Cookie 存儲選中項的 value 值，頁面加載時讀取 Cookie 恢復狀態。採用事件委託綁定在容器上，避免為每個 Checkbox 單獨綁定事件。

完整實現代碼

<div id="checkboxContainer">
  <input type="checkbox" name="options" value="1" /> 選項一<br/>
  <input type="checkbox" name="options" value="2" /> 選項二<br/>
  <input type="checkbox" name="options" value="3" /> 選項三
</div>

<script>
(function() {
  const container = document.getElementById('checkboxContainer');
  const checkboxes = container.getElementsByTagName('input');
  const COOKIE_NAME = 'user_checkbox_prefs';
  const EXPIRE_DAYS = 30;

  // 1. 事件委託：容器統一處理點擊
  container.addEventListener('click', function(e) {
    if (e.target.type === 'checkbox') {
      saveState();
    }
  });

  // 2. 保存狀態到 Cookie
  function saveState() {
    const selectedValues = Array.from(checkboxes)
      .filter(cb => cb.checked)
      .map(cb => cb.value)
      .join(',');
    
    const expires = new Date(Date.now() + EXPIRE_DAYS * 864e5).toUTCString();
    document.cookie = `${COOKIE_NAME}=${selectedValues}; expires=${expires}; path=/`;
  }

  // 3. 頁面加載時恢復狀態
  function restoreState() {
    const cookieMatch = document.cookie.match(new RegExp(`(^| )${COOKIE_NAME}=([^;]+)`));
    if (cookieMatch) {
      const savedValues = cookieMatch[2].split(',');
      Array.from(checkboxes).forEach(cb => {
        cb.checked = savedValues.includes(cb.value);
      });
    }
  }

  // 初始化
  restoreState();
})();
</script>

進階優化建議

• 使用 localStorage 替代 Cookie：容量更大（5MB vs 4KB），不隨 HTTP 請求發送，API 更簡單
• 防抖保存：頻繁操作時延遲 300ms 保存，減少存儲寫入
• 複雜場景序列化：多組 Checkbox 時，用 JSON 存儲 `{groupName: [values]}` 結構
• 安全性：敏感數據勿存明文，考慮加密或僅存非敏感標識符

localStorage 版本（推薦現代瀏覽器）

// 保存
localStorage.setItem('checkbox_prefs', JSON.stringify(selectedValues));
// 恢復
const saved = JSON.parse(localStorage.getItem('checkbox_prefs') || '[]');
checkboxes.forEach(cb => cb.checked = saved.includes(cb.value));

此方案兼容 IE8+ 及所有現代瀏覽器，代碼結構清晰，易於維護擴展。