Electron应用中如何用localStorage保存JSON模板元素的可见状态

• 核心问题：通过JS模板+JSON动态生成的《暗黑破坏神4》莉莉丝祭坛元素，其隐藏checkbox的显隐切换状态无法持久化，重启Electron应用后恢复初始值；但静态元素（如明暗模式切换）的localStorage状态保存功能正常。
• 关键诱因：动态DOM元素的生成时机晚于状态读取操作，导致存储的状态无法绑定到后续生成的元素上；或动态元素的状态变化未被正确捕获并同步到存储介质中。

1. 调整状态读取与动态元素生成的顺序 #

确保在所有动态元素渲染完成后，再从存储介质中读取并恢复状态：

// 第一步：执行模板渲染生成所有祭坛元素
function renderAltarElements() {
  const altarData = require('./altars.json');
  altarData.forEach(altar => {
    const container = document.createElement('div');
    // 模板填充逻辑（示例）
    container.innerHTML = `
      <label class="altar-toggle">
        <input type="checkbox" class="altar-toggle-checkbox" data-altar-id="${altar.id}">
        ${altar.name}
      </label>
      <div class="altar-content">${altar.description}</div>
    `;
    document.getElementById('altar-list').appendChild(container);
  });
}

// 第二步：渲染完成后恢复状态
function restoreToggleStates() {
  const savedStates = JSON.parse(localStorage.getItem('altarToggleStates')) || {};
  document.querySelectorAll('.altar-toggle-checkbox').forEach(checkbox => {
    const altarId = checkbox.dataset.altarId;
    checkbox.checked = savedStates[altarId] ?? false;
    // 同步触发显隐逻辑
    toggleAltarVisibility(checkbox);
  });
}

// 初始化流程
renderAltarElements();
restoreToggleStates();

2. 用事件委托捕获动态元素的状态变化 #

由于元素是动态生成的，直接绑定事件会丢失，需通过父容器的事件委托来监听状态变化并存储：

// 给父容器绑定事件委托，监听所有checkbox的change事件
document.getElementById('altar-list').addEventListener('change', (e) => {
  if (e.target.classList.contains('altar-toggle-checkbox')) {
    const altarId = e.target.dataset.altarId;
    const savedStates = JSON.parse(localStorage.getItem('altarToggleStates')) || {};
    savedStates[altarId] = e.target.checked;
    localStorage.setItem('altarToggleStates', JSON.stringify(savedStates));
    // 若使用electron-store，替换为以下逻辑
    // const store = require('electron-store');
    // store.set(`altarToggles.${altarId}`, e.target.checked);
  }
});

3. electron-store的正确使用方式（替代localStorage） #

若选择electron-store，需确保渲染进程能正确访问该模块，推荐通过预加载脚本（preload.js）暴露，避免开启nodeIntegration带来的安全风险：

// preload.js中暴露electron-store
const { contextBridge } = require('electron');
const Store = require('electron-store');
const store = new Store();

contextBridge.exposeInMainWorld('electronStore', {
  get: (key) => store.get(key),
  set: (key, value) => store.set(key, value)
});

// 渲染进程中调用
function saveToggleState(altarId, isChecked) {
  window.electronStore.set(`altarToggles.${altarId}`, isChecked);
}

function loadToggleState(altarId) {
  return window.electronStore.get(`altarToggles.${altarId}`, false);
}

• 动态生成的checkbox必须携带唯一标识（如data-altar-id），确保状态能与具体元素一一对应。
• 禁止在元素生成前执行状态读取，否则无法找到对应DOM节点完成状态绑定。
• 事件委托是监听动态元素事件的唯一可靠方式，避免直接给动态元素绑定事件。

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