Chrome扩展选项页用localStorage存复选框状态刷新后不生效如何解决

核心问题 #

复选框的选中状态由**布尔属性checked**控制，和value属性无关。value仅用于表单提交时传递数值，你只修改value不会触发选中状态的变化，自然刷新后无法恢复状态。

修复后的代码（兼容你原有逻辑，无需改动HTML） #

const chk = document.getElementById('c1');
const storedPosition = localStorage.getItem('saved');

// 页面加载时直接恢复选中状态
if (storedPosition) {
  chk.checked = storedPosition === 'true';
  chk.value = storedPosition;
}

chk.addEventListener("change", () => {
  // 直接读取checked属性判断状态，无需手动比对value
  const currentVal = chk.checked ? 'true' : 'false';
  chk.value = currentVal;
  console.log(currentVal);
  localStorage.setItem('saved', currentVal);
});

Chrome扩展场景优化建议 #

Chrome扩展官方更推荐使用chrome.storage.local存储配置，它会自动同步到用户登录的所有Chrome设备（如果开启同步），且不会和网页存储冲突，异步版本实现如下：

const chk = document.getElementById('c1');

// 读取存储的配置
chrome.storage.local.get('saved', (res) => {
  if (res.saved !== undefined) {
    chk.checked = res.saved;
  }
});

chk.addEventListener("change", () => {
  chrome.storage.local.set({ saved: chk.checked }, () => {
    console.log('配置已保存', chk.checked);
  });
});

注意使用chrome.storage需要在manifest.json中声明storage权限：

{
  "permissions": ["storage"]
}

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