时间戳

首页 > 解决方案 > Angular 将表单值推送到 LocaleStorage 中的对象而不是覆盖

angular - Angular 将表单值推送到 LocaleStorage 中的对象而不是覆盖

问题描述

当我提交表单时，我将表单值保存在 LocaleStorage 中，但是当我再次提交表单时它会覆盖数据，我如何向其中添加另一个数据/对象？这是我的数据的本地存储“策略”值：

{
   "contactInfo":{
      "email":"fvreferf@gmail.com",
      "phone":"568552255",
      "termsConditions":true
   },
   "beneficiaryInfo":[
      {
         "name":"test",
         "surname":"test2",
         "personalNumber":"02027041738",
         "phone":"5685522555"
      }
   ]
}

.ts

  ngOnInit(): void {
    this.formAlias = 'beneficiaryInfo';
    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() {
if (this.form.valid) {
const formValuesArray: Array<any> = getFromLocalStorage(JSON.stringify('policy'))  || [];
  formValuesArray.push(this.form.value);
  setToLocalStorage('policy', this.formAlias, formValuesArray);
} else {
  this.submitted = true;
}
  }

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

export function getFromLocalStorage<T>(storageKey: string): T {
    return JSON.parse(localStorage.getItem(storageKey));
}

标签： angulartypescript

解决方案

您可能需要进行setToLocalStorage如下更改，

export const setToLocalStorage = (storageKey: string, key: string, value: any) =>
    const formValues: Array<any> = getFromLocalStorage(storageKey) || [];
    formValues.push(value);
    localStorage.setItem(storageKey, JSON.stringify(formValues)
);

推荐阅读