ReactJS中如何将表单数据以数组形式存储到localStorage

已定义状态 #

const initialValues = {companyname:"", email:"", phone:"",website:""}
const [formValues, setFormValues] = useState(initialValues);
const [formErrors, setFormErrors] = useState({});
const [isSubmit, setIsSubmit] = useState(false);

当前实现代码 #

预期在表单提交时将formValues以数组形式存入localStorage，现有实现如下：

useEffect(()=>{
  localStorage.setItem('formValues',JSON.stringify(formValues) );
},[formValues]);

实际存储结果始终为对象格式，无法生成数组结构。

问题原因 #

• formValues本身是对象结构，直接调用JSON.stringify(formValues)序列化后得到的是对象格式的JSON字符串，没有做数组封装、历史数据拼接的处理，自然不会生成数组格式
• 现有useEffect依赖设置为formValues，会在表单任意字段值变动时触发存储，既不符合「表单提交时才存储」的需求，每次触发还会直接覆盖原有存储内容

修复方案 #

推荐实现：将存储逻辑放到表单提交回调中 #

不要监听表单值变化自动存储，直接在提交事件的处理函数中完成数组拼接、存储逻辑，避免输入过程中频繁写入存储：

const handleFormSubmit = (e) => {
  e.preventDefault();
  // 此处保留原有的表单校验逻辑，校验通过后再执行后续存储
  setIsSubmit(true);

  // 读取localStorage中已存的历史数据，首次存储时默认初始化为空数组
  const storedData = localStorage.getItem('formValues');
  const formDataList = storedData ? JSON.parse(storedData) : [];

  // 将本次提交的表单数据追加到数组末尾，可根据业务需求加去重判断
  formDataList.push(formValues);

  // 将拼接好的数组序列化后存回localStorage
  localStorage.setItem('formValues', JSON.stringify(formDataList));
}

替代实现：保留useEffect写法调整逻辑 #

如果需要保留useEffect的监听逻辑，要增加提交状态判断，同时做数组拼接处理：

useEffect(()=>{
  // 仅当提交状态为true时才执行存储
  if (!isSubmit) return;

  const storedData = localStorage.getItem('formValues');
  const formDataList = storedData ? JSON.parse(storedData) : [];
  
  // 可选：增加重复数据判断，避免同一条数据重复存入
  const isDuplicated = formDataList.some(item => 
    item.email === formValues.email && item.phone === formValues.phone
  );
  if (!isDuplicated) {
    formDataList.push(formValues);
    localStorage.setItem('formValues', JSON.stringify(formDataList));
  }
}, [isSubmit, formValues]);

结果验证 #

存储完成后，可在浏览器控制台执行JSON.parse(localStorage.getItem('formValues'))，返回结果为包含所有历史提交表单对象的数组结构，符合预期。

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