vue实现搜索显示历史搜索记录,采用插件-good-storage
安装插件
npm install good-storage -S
在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条，并且新的插入在第一位，首先得到当前的存储数据情况，将关键字存到数组中，判断如果数组中有相同的数据，则把重复的数据删除，将新的关键字存入到前面)
cache.js 文件中的代码如下
/*把搜索的结果保存下来*/ /*用export把方法暴露出来*/ /*定义存储搜索的key _search_定义内部使用的key*/ const SEARCH_KEY='_search_' 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){ 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> <!-- 顶部搜索栏 --> <div> <div>输入关键字</div> <div> <input type="text" ref="inputchange" v-model="valuetext" @keyup.enter="onSearch(true)" @keyup.tab="onSearch(true)" @focus="initPage" placeholder="请输入关键字进行搜索" /> <div type="text" @click="clear">清除</div> </div> <div v-if="!isFocus"> <div v-if="historyxs">搜索历史</div> <div v-if="searches_list.length>0"> <ul v-if="historyxs"> <li v-for="(item,index) in searches_list" :key="index" @click="historysearch(item)" >{{item}}</li> </ul> </div> <div v-else>暂无搜索记录！</div> <p v-if="historyxs" @click="clearhis">清空历史记录</p> </div> </div> <!-- ... 此处省略无关代码 --> <!-- 底部按钮 --> <div> <van-row> <van-col span="12"> <div @click="resetData">重置所选条件</div> </van-col> <van-col span="12"> <div @click="onSearch(true)">立即搜索</div> </van-col> </van-row> </div> </div> </template> <script type="text/Babel"> import { saveSearch } from "../../utils/cache"; //引用本地存储js import 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" 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时你的文件路径要按照你自己的路径来 一 一对应
总结