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 }

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

<template> <div class="search"> <!-- 顶部搜索栏 --> <div class="header"> <div class="head-title title-style">输入关键字</div> <div class="head-input"> <input type="text" ref="inputchange" v-model="valuetext" @keyup.enter="onSearch(true)" @keyup.tab="onSearch(true)" @focus="initPage" placeholder="请输入关键字进行搜索" /> <div type="text" @click="clear" class="input-btn title-style">清除</div> </div> <div class="history-panel" v-if="!isFocus"> <div v-if="historyxs">搜索历史</div> <div v-if="searches_list.length>0"> <ul class="his_ulcon" v-if="historyxs"> <li v-for="(item,index) in searches_list" :key="index" @click="historysearch(item)" >{{item}}</li> </ul> </div> <div class="history-tips" v-else>暂无搜索记录！</div> <p v-if="historyxs" @click="clearhis">清空历史记录</p> </div> </div> <!-- ... 此处省略无关代码 --> <!-- 底部按钮 --> <div class="footer title-style"> <van-row> <van-col span="12"> <div class="left" @click="resetData">重置所选条件</div> </van-col> <van-col span="12"> <div class="right" @click="onSearch(true)">立即搜索</div> </van-col> </van-row> </div> </div></template><script type="text/Babel">import { saveSearch } from "../../utils/cache"; //引用本地存储jsimport storage from "good-storage"; //引入good-storage包export default { data() { return { isFocus: true, searches_list: [], //历史搜索记录列表 historyxs: false, valuetext: "" }; }, mounted() {}, methods: { //输入框获取焦点 initPage() { this.isFocus = false; this.$emit("initSearchPage"); //为避免重复先清空再添加 this.searches_list = []; let searches = storage.get("_search_"); this.searches_list = searches ? searches : []; if (this.searches_list.length > 0) { this.historyxs = true; } else { this.historyxs = false; } }, //清空历史记录 clearhis() { storage.remove("_search_"); this.searches_list = []; this.historyxs = false; }, //点击历史搜索把搜索的记录添加到good-storage中 historysearch(item) { saveSearch(item); this.valuetext = item; this.historyxs = false; }, resetData() { // ... // 此次省略重置数据的逻辑代码 }, onSearch(isFirst) { this.isFocus = true; if (this.valuetext != "") { //搜索框不为空 saveSearch(this.valuetext); // 本地存储搜索的内容 let params = { majorInfo: this.valuetext //流程类型或者流程名称 }; this.$emit("handleSearch", params); this.isFocus = true; } // ... // 此次省略调用搜索接口的代码 }, clear() { this.valuetext = ""; } // ... 无关代码已省略 }};</script><style lang="less" rel="stylesheet/less" type="text/less" scoped>.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; }}</style>

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

总结

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