无法加载本地存储（角度项目）

Question

应用程序中显示的错误我的应用程序遇到了一些问题。我已经用角度制作了一个非常简单的酒店预订列表，但是在我单击提交按钮后，似乎没有发生任何事情，它只是没有响应。我期待某种反馈或操作，但表单提交似乎无法正常工作，可能是由于数据的存储方式或从本地存储检索数据的方式所致。

我正在尝试找出导致这些问题的原因，但我可以使用一些帮助来找出问题的根源。

Answer 1

请参考此代码..

HTML 代码：

     <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div fxLayout="row wrap" fxLayout.lt-sm="column wrap" fxLayoutGap="20px 
    grid" fxLayoutGap.lt-sm="0px">

        <mat-form-field fxFlex="100%">
          <mat-label>Guest Name</mat-label>
          <input matInput type="text" formControlName="GuestName" 
    #inputGuestName maxlength="50">
          <mat-hint align="end">{{inputGuestName.value.length || 0}}/50</mat- 
    hint>
          <mat-error
            *ngIf="formControls.GuestName.invalid && 
    (formControls.GuestName.dirty || formControls.GuestName.touched || 
    formSubmitted)">
            <mat-error 
    *ngIf="formControls.GuestName.errors.required">required</mat-error>
          </mat-error>
        </mat-form-field>

        <mat-form-field fxFlex="100%">
          <mat-label>Phone Number</mat-label>
          <input matInput type="text" formControlName="phoneNumber" >
          <mat-error
            *ngIf="formControls.phoneNumber.invalid && 
    (formControls.phoneNumber.dirty || formControls.phoneNumber.touched || 
    formSubmitted)">
            <mat-error 
    *ngIf="formControls.phoneNumber.errors.required">required</mat-error>
          </mat-error>
        </mat-form-field>

        <mat-form-field fxFlex="100%">
          <mat-label>Enail</mat-label>
          <input matInput type="text" formControlName="email" >
          <mat-error
            *ngIf="formControls.email.invalid && (formControls.email.dirty || 
    formControls.email.touched || formSubmitted)">
             <mat-error 
    *ngIf="formControls.email.errors.required">required</mat-error>
          </mat-error>
        </mat-form-field>
        <div fxLayout="row wrap" fxLayoutAlign="end end">
          <button fxFlex.xs="100" mat-flat-button color="primary" 
    type="submit" title="Add"><mat-icon>save</mat-icon>
            Submit</button>
        </div>
      </div>
      </form>

根据您的要求添加或更新字段。

TS 代码：

         onSubmit() {
  if (this.form.valid) {
    const formValues = this.form.getRawValue();
    const storageKey = "ReservationList";
    let reservationListData: any[] = [];
    const storedData = localStorage.getItem(storageKey);
    if (storedData) {
      reservationListData = JSON.parse(storedData);
    }
    reservationListData.push(formValues);
    localStorage.setItem(storageKey, JSON.stringify(reservationListData));
  }
}

onSubmit 函数管理表单数据的提交及其在浏览器本地存储中的存储。

检查表单有效性：该函数首先验证表单是否有效（this.form.valid）。如果表格无效，则不会继续进行。

检索表单数据：如果表单有效，该函数将使用 this.form.getRawValue() 从表单中检索当前值并将其存储在 formValues 中。

访问本地存储：该函数检查本地存储中是否存在键“RerervationList”下的现有预订列表（注意：该键名称有拼写错误，应更正为“ReservationList”）。

更新或创建预订列表：

如果预订列表存在并且有数据，则将该列表解析为数组（reservationListData）并向其中添加新的表单数据。 如果预订列表为空或不存在，它会初始化一个新列表并向其中添加表单数据。 保存到本地存储：最后，它将更新或新创建的预订列表保存回本地存储，确保数据正确存储。

如果你想学习localStorage，请参考这个网站：- https://blog.logrocket.com/using-localstorage-react-hooks/