JavaScript中如何将用户输入存储到对象并存入localStorage？

• 确认用户输入的获取时机与方式
  要在用户完成输入后（比如点击提交按钮的触发事件中）获取输入值，确保选择器指向正确的输入元素。示例：

  // 获取输入框值
  const userInput = document.getElementById('user-input').value;
  

  别在页面初始化时就获取，那时候输入框是空值。

• 正确给对象属性赋值
  避免直接将DOM元素赋值给对象属性，要明确传入输入值。示例：

  const data = {};
  // 给对象的指定属性赋值用户输入
  data.inputContent = userInput;
  

  不要写成data.inputContent = document.getElementById('user-input')，这会存储DOM节点而非输入内容。

• 存入localStorage前需序列化对象
  localStorage仅支持存储字符串，必须用JSON.stringify()将对象转为字符串后再存储。读取时用JSON.parse()解析：

  // 存入localStorage
  localStorage.setItem('savedData', JSON.stringify(data));
  // 验证读取结果
  const storedData = JSON.parse(localStorage.getItem('savedData'));
  console.log(storedData);
  

• 处理表单提交的默认行为
  如果是在表单中处理输入，要阻止页面默认刷新，否则代码可能未执行完成：

  document.getElementById('submit-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交刷新
    // 这里执行获取输入、赋值对象、存储的逻辑
  });
  

• 用调试工具确认数据流向
  用console.log()打印关键节点的数据，排查问题：

  console.log('获取到的用户输入:', userInput);
  console.log('赋值后的data对象:', data);
  

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