Vue+elmentUI实现搜索框保留历史记录

一、html部分

        <el-autocomplete
          class="inline-input"
           v-model="supplierParams.gChname"
          :fetch-suggestions="querySearch"
           placeholder="请输入供应商名称"
        ></el-autocomplete>

二、js部分

具体代码如下

	    data() {
	      return {
	        searchHistory: [],
	      };
	    },
          querySearch(queryString, cb) {
          // 调用 callback 返回建议列表的数据
          const searchHistory = JSON.parse(localStorage.getItem('coOrName'))
          console.log(searchHistory,queryString,'测试coOrName');
          const results = queryString ? searchHistory.filter(this.createFilter(queryString)) : searchHistory
          cb(results)
      },
      createFilter(queryString) {
          return (searchHistory) => {
              return (searchHistory.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
          }
      },
      // 点击搜索按钮的时候存储（可根据需要修改）
      setIntoStorage() {
          const noArr = []// 历史记录数组
          const value = this.supplierParams.gChname
          const cnoOrName = 'coOrName'
         // 检查 value 是否非空且非仅包含空格  
          if (value && value.trim() !== '') {  
            noArr.push({ value: value, type: cnoOrName });  
          }
          console.log(this.supplierParams.gChname)
          if (JSON.parse(localStorage.getItem(cnoOrName))) {
              // 判断是否已有xxx查询记录的localStorage
              if (localStorage.getItem(cnoOrName).indexOf(value) > -1) { // 判断是否已有此条查询记录，若已存在，则不需再存储
                  return
              }
              if (JSON.parse(localStorage.getItem(cnoOrName)).length >= 5) {
                  const arr = JSON.parse(localStorage.getItem(cnoOrName))
                  arr.pop()
                  localStorage.setItem(cnoOrName, JSON.stringify(arr))
              }
              localStorage.setItem(cnoOrName, JSON.stringify(noArr.concat(JSON.parse(localStorage.getItem(cnoOrName)))))
          } else { // 首次创建
              localStorage.setItem(cnoOrName, JSON.stringify(noArr))
          }
          console.log(localStorage.getItem('coOrName'))
  },

---

注意

在代码中，在将数据存储到本地时，注意value不要为null，否则以下代码会报错

      searchHistory.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0