vue实现搜索框历史记录功能,本地储存,最新点击排在最前面

记录一下,方便以后学习
需求:
输入框搜索历史记录,去重,最新点击的排在最前面,可点击删除

效果:

话不多说,上代码…

HTML部分

 <div class="head_top">
      <div class="left">
        <img src="../fangdajing.png" />   
        <input
          placeholder="请输入搜索关键字"
          ref="getValue"
          v-model="inputText"
          maxlength="50"
          @click="searchName"
        />
      </div>
      <div class="search" @click="search">搜索</div>
    </div>
    <div class="history" v-if="pastHistory">     //历史记录默认不显示,有搜索记录才显示
      <div class="hisText">历史记录</div>
      <ul>
        <li v-for="(item,index) in historyList" :key="index">
          <span @click="clickHistory(item,index)">{{item}}</span>
          <img src="../del.png" alt @click="deleteHis(index)" />
        </li>
      </ul>
    </div>

JS部分

//搜索产品列表
    search() {    //点击搜索按钮
      this.filterData.productTitle = this.$refs.getValue.value;   //获取输入框的值
      this.pastHistory = false;   //每次点击搜索后历史记录就隐藏
      
      if (this.$refs.getValue.value !== "") {  //判断输入框的值
        // 每次搜索的值push到新数组里
        this.newArr.push(this.$refs.getValue.value);
		
        this.newArr = this.unique(this.newArr);  //调用unique方法去重
        
        this.list = [];
        for (let i = this.newArr.length; i > 0; i--) {  //数组倒序  最新输入的排在最上面
          this.list.push(this.newArr[i - 1]);
        }
        
        if (this.list.length > 10) {  //最多保存10条
          this.list = this.list.slice(0, 10);
        }
        localStorage.setItem("historyList", JSON.stringify(this.list));   //存localStorage
      }
      
      this.getProductList();  //最后调用接口
    },
    //去重方法封装 
    unique(arr) {
      return arr.filter(function(item, index, arr) {
        return arr.indexOf(item, 0) === index;
      });
    },
    // 点击文本框输入
    searchName() {
      if (localStorage.getItem("historyList")) {   //historyList有值才执行接下来的操作
        let arrlist = JSON.parse(localStorage.getItem("historyList"));
        this.historyList = arrlist;
        if (this.historyList.length !== 0) {  
          this.pastHistory = true;  //有值显示历史记录
        }
      } else {
        this.pastHistory = false;
      }
    },
    // 点击历史记录直接搜索
    clickHistory(item, index) {
      this.pastHistory = false;   
      this.inputText = item;
      //接口前处理
      this.filterData.productTitle = this.inputText;
      this.productList = [];
      this.getProductList();   //调用搜索接口
      let listIndex = index;
      
      this.historyList.splice(0, 0, this.historyList[listIndex]);  //每次点击记录被点击的展示在最前面
      this.historyList = this.unique(this.historyList);  // 去重
      
      localStorage.setItem("historyList", JSON.stringify(this.historyList));  //新数组储存
    },
    //点击删除记录
    deleteHis(index) {
      if (isNaN(index) || index >= this.historyList.length) {
        return false;
      }
      this.historyList.splice(index, 1);
      
      localStorage.setItem("historyList", JSON.stringify(this.historyList));  //保存删除后的新数组
      if (this.historyList.length === 0) {
        this.pastHistory = false;
      }
    },

css代码就不上啦