Html 从本地存储器获取数据并显示它

嗨，我写了下面的代码来获得用户的评论。我能够将数据保存在本地存储器中。现在我想获取本地存储的信息并显示它

#我的视图组件如下所示：#

---

在submitForm方法中，您实际上在localStorage中重写了3次

备注
值并查看文档：
    <header>Welcome to Products Page!!!</header>
<div class="row">
    <div class="main">
        <div class=" description pointerCursor" (click)="panelExpanded1=!panelExpanded1">Laptop</div>
        <div class="img-container" *ngIf="panelExpanded1">
            <tr>
                <td><img [src]="'assets/img/Img1.png'" alt="Macbook"></td>
                <td>
                    <ul>
                        <b>Unordered information.</b><br>
                        <b>Ordered information.</b><br>
                        <b>Definitions.</b><br>
                        <b>Please give your Remarks:</b>
                        <input type="text" [(ngModel)]="remarks1" name="remarks1">
                        <button type="submit" (click)="submitForm()"> Save </button>
                    </ul>
                </td>
            </tr>
        </div>
    </div>
    <div class="main">
        <div class="description pointerCursor" (click)="panelExpanded2=!panelExpanded2">Mobiles</div>
        <div class="img-container" *ngIf="panelExpanded2">
            <tr>
                <td><img [src]="'assets/img/Img2.png'" alt="OnePlus-Nord"></td>
                <td>
                    <ul>
                        <li>Unordered information.</li>
                        <li>Ordered information.</li>
                        <li>Definitions.</li>
                        <b>Please give your Remarks:</b>
                        <input type="text" [(ngModel)]="remarks2" name="remarks2">
                        <button type="submit" (click)="submitForm()"> Save </button>
                    </ul>
                </td>
            </tr>
        </div>
    </div>
    <div class="main">
        <div class="description pointerCursor" (click)="panelExpanded3=!panelExpanded3">Watch</div>
        <div class="img-container" *ngIf="panelExpanded3">
            <tr>
                <td><img [src]="'assets/img/Img3.png'" alt="Fossil"></td>
                <td>
                    <ul>
                        <li>Unordered information.</li>
                        <li>Ordered information.</li>
                        <li>Definitions.</li>
                        <b>Please give your Remarks:</b>
                        <input type="text" [(ngModel)]="remarks3" name="remarks3">
                        <button type="submit" (click)="submitForm()"> Save </button>
                    </ul>
                </td>
            </tr>
        </div>
    </div>
    <div>
        <button id="backButton" routerLink="/">Back</button>
        <button id="submitButton" routerLink="/">Submit</button>
    </div>
    <footer>End of Products Page!!!</footer>

import { Component, OnInit } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
@Component({
  selector: 'app-my-product-page',
  templateUrl: './my-product-page.component.html',
  styleUrls: ['./my-product-page.component.css']
})
export class MyProductPageComponent implements OnInit {

  panelExpanded1 = false;
  panelExpanded2 = false;
  panelExpanded3 = false;
  remarks1 = "";
  remarks2 = "";
  remarks3 = "";
  constructor(private router: Router) { }

  ngOnInit(): void {
    if (localStorage.getItem("remarks", this.remarks1) != null) {
      console.log(localStorage.getItem("remarks", this.remarks1))
    }
  }
  submitForm() {
    localStorage.setItem("remarks", this.remarks1);
    localStorage.setItem("remarks", this.remarks2);
    localStorage.setItem("remarks", this.remarks3);
    console.log("test");
  }

}