如何使用localStorage持久化保存动态克隆元素的输入值与样式状态

现有localStorage逻辑只针对页面初始加载时就存在的#qty输入框做了读写，动态克隆生成的日光浴床方块既没有被纳入状态采集范围，页面刷新时也没有逻辑根据存储数据重建这些动态节点、还原对应状态，自然刷新后所有动态元素的修改都会丢失。

要覆盖所有动态元素的状态持久化，不能对单个原生元素硬编码存值，要做统一的全量状态管理：

• 给每个日光浴床方块设置唯一固定标识，避免克隆后元素ID重复
• 所有状态（方块总数量、每个方块的背景色、输入框备注内容）统一存在一个结构化的localStorage字段中，不要零散存储单个元素值
• 页面加载时优先读取存储的全量状态，按照记录的方块数量重新生成所有克隆节点，再逐个还原每个方块的颜色、输入值
• 用事件委托把状态变更监听绑定在固定的父容器上，不管是初始元素还是后续新生成的克隆元素，双击改色、输入内容变化时都会触发存储逻辑，不需要给新元素重复绑定事件

<!-- 保留原有数量输入框，新增方块挂载容器 -->
<input type="text" style="height:17px" id="qty" name="qty" size="3" value="">
<div id="bed-container"></div>

const STORAGE_KEY = 'tanning_bed_manage_state';
document.addEventListener("DOMContentLoaded", function() {
  // 页面加载优先还原存储的状态
  renderFromStorage();
  // 数量输入框联动更新方块数量
  const qtyInput = document.getElementById("qty");
  qtyInput.addEventListener("input", function() {
    const targetCount = parseInt(this.value) || 0;
    updateBedBlockCount(targetCount);
    saveAllStateToStorage();
  });
  // 事件委托：统一监听所有方块的双击改色、输入框变更
  const bedContainer = document.getElementById("bed-container");
  bedContainer.addEventListener("dblclick", function(e) {
    const currentBed = e.target.closest(".bed-block");
    if(!currentBed) return;
    // 颜色切换规则可根据自身业务调整，默认绿色为空闲、红色为使用中
    const currentBg = currentBed.style.backgroundColor;
    currentBed.style.backgroundColor = currentBg === 'rgb(39, 174, 96)' ? 'rgb(231, 76, 60)' : 'rgb(39, 174, 96)';
    saveAllStateToStorage();
  });
  bedContainer.addEventListener("input", function(e) {
    if(e.target.classList.contains("bed-note-input")) {
      saveAllStateToStorage();
    }
  });
});

// 读取存储并渲染全部方块
function renderFromStorage() {
  const savedState = JSON.parse(localStorage.getItem(STORAGE_KEY)) || { totalCount: 0, bedList: [] };
  document.getElementById("qty").value = savedState.totalCount;
  const container = document.getElementById("bed-container");
  container.innerHTML = '';
  savedState.bedList.forEach(bedInfo => {
    const bedEl = createSingleBedBlock(bedInfo.id);
    bedEl.style.backgroundColor = bedInfo.bgColor;
    bedEl.querySelector(".bed-note-input").value = bedInfo.noteText;
    container.appendChild(bedEl);
  });
}

// 调整方块数量，多删少补
function updateBedBlockCount(targetCount) {
  const container = document.getElementById("bed-container");
  const existingBeds = container.querySelectorAll(".bed-block");
  if(existingBeds.length > targetCount) {
    for(let i = existingBeds.length - 1; i >= targetCount; i--) {
      existingBeds[i].remove();
    }
  } else if(existingBeds.length < targetCount) {
    for(let i = existingBeds.length; i < targetCount; i++) {
      const newBed = createSingleBedBlock(`bed_${Date.now()}_${i}`);
      container.appendChild(newBed);
    }
  }
}

// 创建单个日光浴床方块
function createSingleBedBlock(uniqueId) {
  const bedDiv = document.createElement("div");
  bedDiv.className = "bed-block";
  bedDiv.dataset.bedId = uniqueId;
  // 方块样式可根据原有设计调整
  bedDiv.style.cssText = "width:120px;height:120px;display:inline-block;margin:8px;background:#27ae60;padding:10px;vertical-align:top;cursor:pointer;";
  bedDiv.innerHTML = `<input type="text" class="bed-note-input" style="width:100%;margin-top:40px;" placeholder="使用备注">`;
  return bedDiv;
}

// 全量状态写入localStorage
function saveAllStateToStorage() {
  const totalCount = parseInt(document.getElementById("qty").value) || 0;
  const allBedEls = document.querySelectorAll(".bed-block");
  const bedList = Array.from(allBedEls).map(el => {
    return {
      id: el.dataset.bedId,
      bgColor: el.style.backgroundColor,
      noteText: el.querySelector(".bed-note-input").value
    }
  });
  localStorage.setItem(STORAGE_KEY, JSON.stringify({ totalCount, bedList }));
}

• 存储对象类型数据到localStorage时，必须先用JSON.stringify转成字符串，读取时再用JSON.parse解析，直接存对象会被转成[object Object]导致数据失效
• 不要给动态生成的元素逐个绑定事件，事件委托的方式性能更好，也不需要在每次生成新元素时重复写绑定逻辑
• 如果后续要加更多状态（比如使用时长、客户信息），只需要在存储的bedList项里加对应字段、在保存时采集对应值、渲染时赋值即可，扩展成本很低

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