前端如何实现搜索记录展示以及清楚历史搜索记录

<div class="historydata" v-show="input">

            <div>历史搜索</div>

            <ul class="">

              <li v-for="(item, index) in historyList" :key="index" class="text">

                {{ item }}

              </li>

            </ul>

          </div>

 mounted() {

    if (JSON.parse(localStorage.getItem("historyList"))) {

      this.historyList = JSON.parse(localStorage.getItem("historyList"));

    }

  },

点击搜索调下边这个方法

      hostoryfilter(){

  

      

      if (this.input == "") {

        // this.$toast('请输入搜索内容');

        return false;

      } else {

        // 没有搜索记录，把搜索值push进数组首位，存入本地

        if (!this.historyList.includes(this.input)) {

          this.historyList.unshift(this.input);

          localStorage.setItem("historyList", JSON.stringify(this.historyList));

        } else {

          //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位

          let i = this.historyList.indexOf(this.input);

          this.historyList.splice(i, 1);

          this.historyList.unshift(this.input);

          localStorage.setItem("historyList", JSON.stringify(this.historyList));

        }

        if(this.historyList.length == 50){

          this.historyList = []

        }

      }

      },