在ionic中显示搜索历史记录

<ion-header>
  <ion-toolbar>
    <ion-title>搜索</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="search()" placeholder="搜索"></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let history of searchHistory">
      {{ history }}
    </ion-item>
  </ion-list>

  <ion-button expand="full" (click)="clearHistory()">清除历史记录</ion-button>
</ion-content>

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage {
  searchTerm: string;
  searchHistory: string[] = [];

  constructor(private storage: Storage) { }

  ionViewDidEnter() {
    this.getSearchHistory();
  }

  getSearchHistory() {
    this.storage.get('searchHistory').then((history) => {
      if (history) {
        this.searchHistory = history;
      }
    });
  }

  search() {
    // Perform search operation using searchTerm

    // Save search term to history
    if (this.searchTerm && !this.searchHistory.includes(this.searchTerm)) {
      this.searchHistory.push(this.searchTerm);
      this.storage.set('searchHistory', this.searchHistory);
    }
  }

  clearHistory() {
    this.searchHistory = [];
    this.storage.remove('searchHistory');
  }
}