如何将动态新增的多个输入框的值保存到localStorage？

我来帮你搞定这个输入框值的持久化问题，先梳理下原代码里的几个关键问题，再给你调整后的完整方案：

原代码的核心问题 #

• 循环条件错误：saveToLS里的for(let i = 0; i < main.children; i++)逻辑有问题，main.children是HTMLCollection对象，直接和数字i比较会导致循环根本不执行或者出错，得用main.children.length来获取输入框的实际数量。
• 存储方式冗余：逐个给输入框单独存localStorage键值对，不仅麻烦，还可能在输入框数量变化时留下无效的存储项。更合理的是把所有输入框的值打包成一个数组统一存储。
• 事件绑定重复风险：如果loadElements多次触发（比如页面重复加载时），会给同一个输入框多次绑定keydown事件，可能导致一次回车触发多次新增输入框的异常。

修正后的完整代码 #

let main = document.getElementById('main'); 
let ls = window.localStorage; 

// 回车新增输入框的逻辑（补全你没贴的部分）
function inputKeyClick(e) {
  if (e.key === 'Enter') {
    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.addEventListener('keydown', inputKeyClick);
    main.appendChild(newInput);
    newInput.focus(); // 新增后自动聚焦，提升体验
  }
}

// 保存数据到localStorage
function saveToLS() { 
  // 1. 保存输入框的DOM结构
  ls.setItem("content", main.innerHTML); 
  // 2. 收集所有输入框的值，转成数组字符串存储
  const inputValues = Array.from(main.children).map(input => input.value);
  ls.setItem("inputValues", JSON.stringify(inputValues));
} 

// 从localStorage加载数据
function loadElements() { 
  if (ls) { 
    // 恢复输入框结构，没有数据时显示空内容
    main.innerHTML = ls.getItem("content") || ''; 
    // 解析保存的输入框值数组，没有数据时用空数组
    const savedValues = JSON.parse(ls.getItem("inputValues")) || [];
    // 遍历输入框，绑定事件并赋值
    Array.from(main.children).forEach((input, index) => {
      // 先移除再绑定，避免重复绑定事件
      input.removeEventListener('keydown', inputKeyClick);
      input.addEventListener('keydown', inputKeyClick);
      // 给对应位置的输入框赋值，没有对应值时显示空
      input.value = savedValues[index] || '';
    });
  } 
}

// 页面加载完成后自动恢复数据
window.addEventListener('DOMContentLoaded', loadElements);

// 给保存按钮绑定事件（假设你的保存按钮id是saveBtn）
document.getElementById('saveBtn').addEventListener('click', saveToLS);

关键改进说明 #

• 统一存储值：用JSON.stringify把输入框值数组转成字符串存储，读取时用JSON.parse解析，既简洁又避免冗余的键值对。
• 遍历更安全：用Array.from(main.children)把HTMLCollection转成数组，方便用map/forEach遍历，避免直接操作HTMLCollection的各种坑。
• 防止事件重复绑定：绑定前先移除一次事件监听，避免多次执行loadElements时重复绑定导致的异常。
• 容错处理：添加|| ''和|| []的默认值，避免localStorage中没有数据时出现报错。

现在点击保存按钮后，所有输入框的结构和值都会被正确存储，刷新页面后就能完整恢复啦！

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