localStorage存储复选框状态 刷新后无法保持选中问题求助

• 状态恢复逻辑位置错误：读取localStorage设置复选框状态的代码写在了onClick回调_test中，页面刷新时不会触发点击事件，这段恢复逻辑完全不会执行，这是刷新后状态不生效的核心原因。
• 复选框操作API使用错误：不要用setAttribute('checked', xxx)控制复选框实时状态。HTML标签上的checked属性仅控制元素首次加载的默认选中态，后续状态变更必须直接操作DOM元素的.checked布尔属性。只要标签上存在checked属性，无论你把属性值设为false还是空字符串，浏览器都会判定复选框为选中状态。
• 点击事件逻辑顺序颠倒：点击触发时先读存储设状态、再读当前checked值存存储的逻辑顺序完全反了，点击后复选框的状态已经完成切换，不需要在点击回调里再重复给checked赋值。

• 把状态恢复逻辑从点击事件中剥离，放到页面/组件DOM渲染完成后的初始化阶段执行。如果你用的是Dojo框架，直接放到组件的postCreate生命周期钩子中执行即可。
• 所有复选框状态修改统一使用.checked布尔属性操作，删除所有setAttribute('checked', xxx)相关代码。
• 点击事件仅负责监听状态变化、同步更新localStorage即可，不需要额外修改复选框本身的checked值。

HTML部分无需调整：

<div style="color: #005e95">
  <input type="checkbox" id="checkboxFullDownload" data-dojo-attach-event="onClick: _test" style="cursor: pointer;">
  Full Download
</div>

JS部分调整如下：

// 组件初始化时调用该方法恢复复选框状态
initDownloadCheckbox: function () {
  const checkBox = document.getElementById("checkboxFullDownload");
  const storageKey = `${xmlTitle} ID:${this.item._id}`;
  // 直接根据本地存储值设置选中态
  checkBox.checked = localStorage.getItem(storageKey) === "AllowFullDownload";
},

// 点击事件仅做本地存储同步
_test: function () {
  const checkBox = document.getElementById("checkboxFullDownload");
  const storageKey = `${xmlTitle} ID:${this.item._id}`;

  if (checkBox.checked) {
    console.log("Checked");
    localStorage.setItem(storageKey, "AllowFullDownload");
  } else {
    console.log("Unchecked");
    localStorage.removeItem(storageKey);
  }
}

注意：必须在DOM渲染完成后调用initDownloadCheckbox方法，否则会因为拿不到checkbox元素报错。Dojo组件在postCreate钩子中调用该方法即可。

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