Angular 如何添加多个对象而不是覆盖本地存储

提交表单时，我将数据保存到localeStorage，但当我再次提交表单时，它将覆盖数据，如何向其中添加另一个对象

.ts

    this.formAlias = 'addBeneficiary';
    this.form = this.fb.group({
      name: ['', [Validators.required, Validators.pattern('[ა-ჰ\-\s]+$')]],
      surname: ['', [Validators.required,  Validators.pattern('[ა-ჰ\-\s]+$')]],
      personalNumber: ['', [Validators.required, Validators.pattern('[0-9]+'), Validators.minLength(11), Validators.maxLength(11)]],
      phone: ['', [Validators.pattern('[0-9]+'), Validators.minLength(9), Validators.maxLength(11), Validators.required]],
    });
    
      onSubmit() {
        this.submitted$.next(true);
        if (this.form.valid) {
          setToLocalStorage('policy', this.formAlias, this.form.value);
          this.stepService.nextStep();
        } else {
              this.submitted = true;
            }
      }

//setToLocalStorage 

    export const setToLocalStorage = (storageKey: string, key: string, value: any) =>
        localStorage.setItem(storageKey, JSON.stringify({
            ...getFromLocalStorage(storageKey),
            [key]: value
        }));

---

您可以将值数组存储在本地存储器中。这样，每次提交时，您都可以从本地存储读取阵列，添加表单值并保存更新的阵列

onSubmit（）{
此.submitted$.next（true）；
if（this.form.valid）{
const formValuesArray:Array=getFromLocalStorage（'policy'）| |[]；
formValuesArray.push（this.form.value）；
setToLocalStorage（“策略”，this.formAlias，formValuesArray）；
this.stepService.nextStep（）；
}否则{
this.submitted=true；
}
}

---

我不知道

setToLocalStorage

方法是如何实现的，因为它看起来像一个自定义代码。将其代码添加到问题中可能很有用。

正如@IAfanasov所说，您可以将值存储为数组。另一种方法是创建唯一的密钥。。。幸运的是，从您的代码中，我可以猜到，

this.formAlias

是决定一个表单是否唯一的因素

因此，只需使用此唯一标识符在localStorage上创建新对象即可

  onSubmit() {
    myUniqueIdentifier() {
      return 'policy' + this.formAlias; // You can amend this incase  this.formAlias isn't what you use to identify each form
    }
    this.submitted$.next(true);
    if (this.form.valid) {
      const formValuesArray: Array<any> = getFromLocalStorage(this.myUniqueIdentifier());
      formValuesArray.push(this.form.value);
      setToLocalStorage(this.myUniqueIdentifier(), formValuesArray);
      this.stepService.nextStep();
    } else {
      this.submitted = true;
    }
  }

onSubmit（）{
myUniqueIdentifier（）{
return'policy'+this.formAlias；//如果this.formAlias不是用于标识每个表单的内容，则可以对其进行修改
}
此.submitted$.next（true）；
if（this.form.valid）{
const formValuesArray:Array=getFromLocalStorage（this.myUniqueIdentifier（））；
formValuesArray.push（this.form.value）；
setToLocalStorage（this.myUniqueIdentifier（），formValuesArray）；
this.stepService.nextStep（）；
}否则{
this.submitted=true；
}
}

---

最后，您将看到以“policy”为前缀的localstorage中的项目。

谢谢您的回答，我编辑了我的回答并添加了我的setToLocalStorage方法。我的代码中出现错误：类型“unknown”上不存在属性“push”。有什么想法吗？应该是因为方法

getFromLocalStorage

返回类型是

unknown

。这是合理的。我用

formValuesArray

变量的类型更新了代码示例在我的保单价值中有许多对象：如{“calculatorInfo”：{“product”：“lifeci”，“gender”：“F”，“payFrequency”：12，“submit”：“100”，“currency”：“EUR”，“amount”：“25000”，“period”：7}，“联系人信息”：{“电子邮件”：”fvreferf@gmail.com，“电话”：“568552211”，“条款条件”：true}，“受益人信息”：{“姓名”：”ლიკა", "姓“：”ტყჰტჰტჰყტჰტ", "personalNumber:“02027041738”，“phone:“568552255”}}我得到这个错误：错误类型错误：formValuesArray.push不是一个函数谢谢你的回答，正如我所说，@IAfanasov solution在我的代码中不起作用，它创建了第一个数组，但当我再次提交表单时，它会覆盖相同的数组。对于您的解决方案，我在提交表单时会出错。错误类型错误：无法读取null的属性“push”。这是我的策略值的外观。{“联系人信息”：{“电子邮件”：”fvreferf@gmail.com“，”电话“：”568552255“，”条件“：真“，”未成年儿童信息“：{”性别“：”F“，”姓名“：”测试“，”姓氏“，”测试“，”个人号码“：”02027041738“，”出生日期“：”2021-06-27T13:46:47.000Z“}”