Как поддерживать массив истории для хранения уже найденных терминов с использованием angular?

#angular

#angular

Вопрос:

Я работаю над проектом с использованием angular, где мне нужно сохранить все ранее найденные термины (например, мобильные телефоны в моем случае) и отобразить эти термины в выпадающем списке как историю, чтобы пользователь мог повторно открыть сведения о любом ранее найденном телефоне, нажав на него.

Пожалуйста, порекомендуйте, как я могу получить эту функциональность или дать ссылку на любую статью, которая может оказать какую-либо помощь.

Заранее большое спасибо

Ответ №1:

 searchHistory = [];

query = '';

search() {
  // do your search then store the result
  if (!this.searchHistory.some(q => q === this.query)) {
    this.searchHistory = [...this.searchHistory, this.query];
  }
}
  

и в шаблоне

 <select (change)="query = $event.target.value">
  <option *ngFor="let previousQuery of searchHistory">{{previousQuery}}</option>
</select>
  

Демонстрация StackBlitz

https://stackblitz.com/edit/angular-ra7a3y?file=src/app/app.component.html

Если вам нужно, чтобы массив сохранялся на разных страницах, вы можете переместить массив в службу, которая предоставляется в корне.

Комментарии:

1. но что, если я хочу, чтобы этот массив истории сохранял свои значения, даже если страница обновляется.

2. sessionStorage можно использовать для хранения информации при обновлении страницы, а localStorage можно использовать для хранения в сеансах браузера.