Angular+Ionic实现搜索的历史记录功能(浏览器记录)

Angular+Ionic实现搜索的历史记录功能(浏览器记录)

1，html中

<!--搜索框内容 -->

<div class="header-search-input">
        <input type="text" id="research" placeholder="搜索商品" [(ngModel)]="inputTypes"
          (keyup)='getTypes($event)' (click)="onTauch()">
        <img class="shop-search-find" src="../../../assets/icon/search-icon/search.png"> </div>

<!--   历史记录内容 -->

<div class="shop-types-nocontent" *ngIf="!isShowContent">
<ion-list class="history-header">
        <ion-text class="history-log">
          历史记录
        </ion-text>
        <ion-text class="history-null">
        </ion-text>
        <ion-text class="history-delete" (click)="deleteAll()">
          <ion-icon name="trash-outline" class="icon-delete-gray"></ion-icon>
        </ion-text>
  </ion-list>
   <ion-list  class="history-content">
     <ion-text class="history-cell"  *ngFor="let item of historyItems">
         <span  (click)="checkedHisItem(item)">{{item}}</span> 
     </ion-text> 
  </ion-list>
</div>

<!-- 主界面内容 -->

 <div *ngIf="isShowContent" class="shop-types-content" > 
 主界面内容
 </div>

,2，ts中

//保存输入内容到localStorage

getTypes(e) {
    //实现防抖,设置定时器
    let timer = null; 
    timer && clearInterval(timer)
    timer = setTimeout(() => {
      console.log(this.inputTypes);
    }, 500);
    //监听事件
    let keycode = window.event ? e.keyCode : e.which;
    if (keycode == 13) {
       if (this.inputTypes.length > 0) {
           this.isShowContent=!this.isShowContent;
         this.inputValue = this.inputTypes.slice(0, 30);
         this.historyItems.push(this.inputValue) //存入数组
        let historyArr=Array.from(new Set(this.historyItems));//去掉重复
         console.log(historyArr+"去掉重复")
         let historyList=historyArr.join(",");   转为字符串  
         localStorage.setItem('historyItems', JSON.stringify(historyList)); //对象转换为字符串保存到localStorage
         let reSearchItems = localStorage.getItem('historyItems');
         //跳转页面
         this.router.navigate(['/product-reclassify'])
         console.log(reSearchItems+"reSearchItem");
       }
    }
   if (keycode == 27) {//esc键
          console.log("请重新输入")
   }
  }


//显示历史记录
onTauch(){
 this.isShowContent=!this.isShowContent;
}
//选中历史记录搜索
checkedHisItem(item) {
    this.inputValue = item;
    this.router.navigate(['/product-reclassify'])
}
//删除历史记录
deleteAll() {
  this.historyItems.forEach(item => {
      this.historyItems.splice(item); 
});
 this.getClassList();
}

3.实现功能效果

3.实现思路

使用localStorage保存输入值，通过*ngIf实现显示，遍历历史记录实现点击搜索。