Vue 实现输入框新增搜索历史记录功能

vue实现搜索显示历史搜索记录,采用插件-good-storage

安装插件

     npm install good-storage -S

在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条，并且新的插入在第一位，首先得到当前的存储数据情况，将关键字存到数组中，判断如果数组中有相同的数据，则把重复的数据删除，将新的关键字存入到前面)

cache.js 文件中的代码如下

 
 
 
const SEARCH_KEY='_search_' 
const SEARCH_MAX_LENGTH=15 
 
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){ 
  let searches=storage.get(SEARCH_KEY,[]) 
   
  insertArray(searches,query,(item)=>{    
    return item===query //这是传入的一个比较函数 说明query在这个数组中 
  },SEARCH_MAX_LENGTH) 
  storage.set(SEARCH_KEY,searches) 
  return searches 
} 

在对应的组件中应用的方式:

.search {
 overflow-y: scroll;
 overflow-x: hidden;
 padding: 0.14rem 0.12rem 0.53rem;
 .header {
  border-bottom: 0.01rem solid #f2f2f2;
  .head-title {
   padding-bottom: 0.05rem;
   color: #666666;
  }
  .head-input {
   width: 100%;
   padding-bottom: 0.1rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

   > input {
    height: 0.29rem;
    width: 2.84rem;
    border-radius: 0.03rem;
    background-color: #f6f6f6;
    font-family: PingFang-SC-Regular;
    font-weight: Regular;
    color: #999999;
    font-size: 0.12rem;
    padding-left: 0.12rem;
   }
   .input-btn {
    color: #029ffb;
    width: 0.5rem;
    height: 0.29rem;
    line-height: 0.29rem;
    text-align: center;
   }
  }
  .history-panel {
   width: 100%;
   overflow: hidden;
   padding: 0.1rem 0;
   border-top: 1px solid #f2f2f2;
   .his_ulcon {
    margin-top: 0.1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    > li {
     border: 1px solid #f2f2f2;
     border-radius: 0.03rem;
     display: inline-block;
     font-size: 0.12rem;
     padding: 0 0.15rem;
     width: fit-content; //div宽度自适应文字内容
     width: -webkit-fit-content;
     width: -moz-fit-content;
     height: 0.29rem;
     line-height: 0.29rem;
     text-align: center;
     margin-right: 0.1rem;
     background-color: #f2f2f2;
     margin-bottom: 0.1rem;
    }
   }
   div {
    box-sizing: border-box;
    font-size: 0.13rem;
    color: #666666;
    font-weight: Medium;
    font-family: PingFang-SC-Medium;
   }
   > p {
    text-align: center;
    margin-top: 0.1rem;
    font-size: 0.13rem;
   }
  }
  .history-tips {
   text-align: center;
  }
 }
 .title-style {
  font-size: 0.13rem;
  font-weight: Medium;
  font-family: PingFang-SC-Medium;
 }
}

温馨提示:引入cache.js时你的文件路径要按照你自己的路径来 一 一对应

总结

以上所述是小编给大家介绍的Vue 实现输入框新增搜索历史记录功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！