安装：npm install good-storage -S

缓存cache.js:
 

/*把搜索的结果保存下来*/
/*用export把方法暴露出来*/
/*定义存储搜索的key _search_定义内部使用的key*/
let searches_list= []
const SEARCH_MAX_LENGTH=15
/*插入方法   arr存储的数据 val传入存储的值 compare前后比较的函数 maxlen存入的最大值*/
function insertArray(arr,val,compare,maxlen){
    //findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
    const index=arr.findIndex(compare)
    if(index===0){ //数据为数组中的第一个数据 不做任何操作
        return
    }
    if(index>0){ //数组中有这条数据并且不再第一个位置
        arr.splice(index,1) //删掉这个数
    }
    arr.unshift(val);//把这条数据存储到数组中的第一个位置上
    if(maxlen && arr.length>maxlen){
        //如果有条数限制并且数组的个数大于限制数
        arr.pop() //方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值

    }
}
//开源storage的库，对localstorage和sessionstorage的封装
import storage from 'good-storage'
export function saveSearch(query,inputName){
    let searches=storage.get(inputName,[])
    /*逻辑是最后一次搜索的结果放到搜索历史的第一个*/
    insertArray(searches,query,(item)=>{
        return item===query //这是传入的一个比较函数 说明query在这个数组中
    },SEARCH_MAX_LENGTH)
    storage.set(inputName,searches)
    return searches
}

export function historySearch(query,inputName){
    if (query != "") {
        //搜索框不为空
        let searches=storage.get(inputName,[])
        /*逻辑是最后一次搜索的结果放到搜索历史的第一个*/
        insertArray(searches,query,(item)=>{
            return item===query //这是传入的一个比较函数 说明query在这个数组中
        },SEARCH_MAX_LENGTH)
        storage.set(inputName,searches)
    }
    //为避免重复先清空再添加
    searches_list = [];
    let searches = storage.get(inputName);
    searches_list = searches ? searches : [];
    return searches_list;
}

vue组件代码,将输入框放入iviewui框架用Poptip标签包裹

<template>
  <div class="container">
    <!-- form -->
    <div style="width: 100%">
      <Form ref="query" :model="query" :label-width="80" inline>
        <div style="float: left">
          <FormItem label="账号搜索">
            <Poptip trigger="focus" placement="bottom-start">
              <Input v-model="query.name" placeholder="用户ID(证件号)/手机号" clearable />
              <template #content>
                <ul>
                  <li v-for="(item,index) in searches_list" :key="index" @click="historySearchFocus(item)">{{item}}</li>
                  <li v-if="!historyQueryName">暂无历史记录！</li>
                  <Button v-if="historyQueryName" @click="clearHistory">清空历史</Button>
                </ul>
              </template>
            </Poptip>
          </FormItem>
          <FormItem :label-width="0">
            <Button type="primary" :loading="loading" @click="handleSubmit('query')">
              <span v-if="!loading">搜索</span>
              <span v-else>数据查询中</span>
            </Button>
          </FormItem>
        </div>
      </Form>
    </div>
  </div>
</template>

引入插件：

import {historySearch, saveSearch} from "@/store/cache";
import storage from "good-storage"; //引用本地存储js

添加变量：
searches_list: [], //历史搜索记录列表
historyQueryName: false,//历史记录是否存在

 查询调用方法中增加：

//历史缓存
this.searches_list = historySearch(this.query.name,"violations_queryName");//添加历史缓存
this.historyQueryName = this.searches_list.length>0;

不同的输入框改变自定义的key即可（当前是"violations_queryName"）

添加input框聚焦和清空历史方法

historySearchFocus(item) {
  saveSearch(item,"violations_queryName");//把搜索的记录添加到good-storage中
  this.query.name = item;
},
//清空历史记录
clearHistory() {
  storage.remove("violations_queryName");
  this.searches_list = [];
  this.historyQueryName = false;
},

 

 效果如下：