Vue搜索框显示最近（历史）搜索记录

效果：

实现：

当按回车键的时候会将最近搜索的内容展示出来。
（一）HTML

 <el-input
     @input="searchContent($event)"
     v-model="keywords"
     @keyup.enter.native="submit"
     size="small"
     id="input"
     class="input"
     placeholder="请输入内容"
     @focus="onInputFocus"
     @blur="onInputBlus"> 
</el-input>
              
 <div class="allHislist">
    <span
      v-for="(item, index) in allHislist"
      :key="index"
      v-show="allHislistShow">
      {{ item }}</span >
</div>

（二）Script

  // 搜索框输入的内容
      keywords: "",
 //查询返回的内容
      dataList: [],
 // 最近搜索列表
      hislist: [],
 

(三) 方法

 created() {
 let all = localStorage.allHislist;
    if (all) {
      // 将数组转字符串
      this.allHislist = JSON.parse(all);
    }
}
submit() {
	//判断是否有重复
     var index = this.allHislist.findIndex((ele) => {
       return ele == this.keywords;
     });
     //如果有的话就删除重复
     if (index != -1) {
       this.allHislist.splice(index, 1);
     }
     //向数组第一位添加
     this.allHislist.unshift(this.keywords);
     //如果数组长度大于4 就删除最后一项
     if (this.allHislist.length > 4) {
       this.allHislist.splice(5, 1);
     }
     // 本地存储历史记录数组
     localStorage.allHislist = JSON.stringify(this.allHislist);
     
     }