表单提交时如何以设备编号为Key向LocalStorage新增数据？

原代码的问题在于每次都用固定的equipment作为LocalStorage的键，导致新提交的数据直接覆盖旧数据。要实现以设备编号为键存储多条数据，只需要调整存储时的键名，并优化存储的数据结构：

修改后的代码 #

class Equipment {
  constructor(equipmentnumber, ordernumber, date) {
    this.equipmentnumber = equipmentnumber;
    this.ordernumber = ordernumber;
    this.date = date;
  }
}

function addProcess() {
  // 获取并格式化表单输入值
  const eqNumber = equipmentnumber.value.trim();
  const orderNum = ordernumber.value.trim();
  const submitDate = date.value.trim();

  // 验证必填字段完整性
  if (!eqNumber || !orderNum || !submitDate) {
    alert('请填写完整的设备信息');
    return;
  }

  // 整理需要存储的数据（键已用设备编号，无需重复存储该字段）
  const equipmentData = {
    ordernumber: orderNum,
    date: submitDate
  };

  // 以设备编号作为唯一键，将数据存入LocalStorage
  localStorage.setItem(eqNumber, JSON.stringify(equipmentData));
}

关键改动说明 #

• 替换存储键名：不再使用固定的equipment作为键，改用设备编号（eqNumber）作为LocalStorage的键，每条数据拥有独立标识，避免互相覆盖。
• 优化存储结构：因为键已经是设备编号，值里只保留ordernumber和date即可，减少数据冗余。
• 增加基础校验：提交前检查必填字段是否为空，避免无效数据存入LocalStorage。

最终效果 #

提交表单后，LocalStorage会生成如下结构：

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