如何在localStorage中将多次表单提交内容存储为独立值

问题原因 #

localStorage 采用键值对存储逻辑，同一个键调用setItem时，新传入的值会直接覆盖原有值。你当前固定使用formdata作为存储键，自然每次提交新表单都会覆盖之前存储的内容。

解决方案 #

把所有历史提交的表单数据用数组统一存储，每次提交时先读取已存储的数组，追加新数据后再整体写回localStorage即可，仅需要修改onSubmit方法的逻辑：

onSubmit() {
  // 读取本地已存储的表单数据，无历史数据时初始化空数组
  const existingFormList = JSON.parse(localStorage.getItem('formdata') || '[]');
  // 追加本次新提交的表单数据
  existingFormList.push(this.myform.value);
  // 将更新后的数组重新存回localStorage
  localStorage.setItem('formdata', JSON.stringify(existingFormList));
  // 可选：提交完成后清空表单，方便用户下次输入
  this.myform.reset();
}

补充说明 #

• 如果需要每条数据对应独立的键存储，可以给键名拼接唯一标识（比如时间戳）：localStorage.setItem(formdata_${Date.now()}, JSON.stringify(this.myform.value))，但这种方案后续批量查询所有表单数据的复杂度更高，优先推荐数组存储方案。
• localStorage 单域存储上限一般为5MB，超量会写入失败，不适合存储过多的表单提交记录。

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