前言：
我们在进行一些项目开发时，很有可能会涉及到在搜索框中搜索某一个词条，从而进行相应的检索。
在这里就会出现一个优化功能，我们在搜索后的某一个词条，我希望能够显示在历史记录中。这样一个小的tip，可以给用户带来更高的使用体验。
历史记录并不会保存在后端，因为历史记录本身体积小，也为了方便对其操作，一般保存在本地中。
该功能重要方法为本地存取，代码如下：
// 微信小程序的文档中有对本地存储的功能简述wx.setStorage({key: 'history',data: JSON.stringify(val)})key：你存在本地缓存中的keydata：你存在本地缓存中的数据，注意，这里存进去的时JOSN对象，需要做转型处理
小程序本地存储https://developers./miniprogram/dev/api/storage/wx.setStorage.html
// 小程序获取对应key值数据wx.getStorage({key: 'history',success(res) {that.historyList = JSON.parse(res.data)}})success是该方法成功触发的回调函数，在里面你可以进行一些操作注意，这里会存在this指向的问题，将this在该方法的作用域中赋值给that，可以解决，详细的解释可以自行搜索查证
小程序本地取出https://developers./miniprogram/dev/api/storage/wx.getStorage.html
需求分析：
搜索历史应该包含以下效果：
1.空格无效
2.存储词条
3.删除词条
4.获取词条
我们在搜索框中输入词条后，跳转到某个页面返回后它应该显示在历史记录的位置，并且不论我跳转到了哪个页面，我都应该能够保留这个词条信息，而且我能够删除这些词条。
效果图
实现
注意，该功能基于uview框架开发。
html部分
<template><view class="layout"><!-- 自定义导航栏 --><view><u-navbar bgColor="#f4f5f6" autoBack height="88rpx" placeholder><template #center><view class="navbar_center"><u-search v-model="value"placeholder="输入关键字"clearabled@search="onSearch":showAction="false" bgColor="#FFFFFF"></u-search></view></template></u-navbar></view><view class="history-style"><span class="font-12 font-b">历史搜索</span><u-icon name="trash" color="#808080" size="14" :bold="true" @click="showModal"></u-icon></view><!-- tag --><view class="tag-style"><template v-for="(item, id) in historyList"><view class="tag-margin" :key="id"><u-tag :text="item" bgColor="#EBEBEB" size="mini" borderColor="transparent"color="black"></u-tag></view></template></view><u-modal :show="show" :closeOnClickOverlay="true"showConfirmButtonshowCancelButton:content='content'@close="close"@cancel="close"@confirm="delTags"></u-modal></view></template>
在这里样式不做赘述，只研究功能的实现，
注意看，我在search组件中使用了双向绑定，当我在对value做操作时，value的数据会进行同步，当我确认好我输入的词条后，触发@search事件，
js部分
<script>export default {name: 'SearchIndex',data() {return {value: '',show: false,content: '确认删除全部历史记录？',skipAddress: '/pages/index/index',historyList: []}},onLoad() {this.getRecord()},// created() {// this.getRecord()// },// mounted() {// this.getRecord()// },methods: {judge(val) {// 判断历史记录是否超过10条if(this.historyList.length < 10) {// 判断历史记录中有没有搜索过的词条if(!this.historyList.includes(val)){if(val.length > 4) {val = val.slice(0,3).trim() + '...'}// 存入本地this.historyList.unshift(val);this.setRecord(this.historyList)}}else {// 判断历史记录中有没有搜索过的词条if(!this.historyList.includes(val)){if(val.length > 4) {val = val.slice(0,3).trim() + '...'}//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位let i = this.historyList.indexOf(val);this.historyList.splice(i,1)// 存入本地this.historyList.unshift(val);this.setRecord(this.historyList)}}},// 获取本地记录getRecord() {let that = thiswx.getStorage({key: 'history',success(res) {that.historyList = JSON.parse(res.data)}})},// 存储本地数据setRecord(val) {console.log(val);wx.setStorage({key: 'history',data: JSON.stringify(val)})},// 确认搜索onSearch(val) {this.judge(val)this.value = ''},// 是否展示modalshowModal() {this.show = true},// 是否关闭modalclose() {this.show = false},// 删除tagsdelTags() {wx.clearStorage()this.historyList = ''this.show = false}}}</script>
这里我将判断以及存储值得操作抽象出来，写在了一个方法里。这里将所有操作写在onSearch中也是一样的，并没有区别。
search事件是当搜索框确认时触发的事件，当我们确认输入的内容后调用judge方法，
if(this.historyList.length < 10) {// 这里进行满足条件的操作}else {//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位let i = this.historyList.indexOf(val);this.historyList.splice(i,1)this.historyList.unshift(val);this.setRecord(this.historyList)}
这里我对历史记录的长度做了一个约束——不能大于10，意思就是只记录10条信息，超过10条，就会将最后一条信息删除，将新的信息放在数组的最前边。
// 判断历史记录中有没有搜索过的词条if(!this.historyList.includes(val)){if(val.length > 4) {val = val.slice(0,3).trim() + '...'}// 存入本地this.historyList.unshift(val);this.setRecord(this.historyList)}
满足条件时，这里我又对输入的信息做了一个限制，当输入的val值长度超过4个长度时，截取val值前3个字符拼接上...。
// 删除tagsdelTags() {wx.clearStorage()this.historyList = ''this.show = false}wx.clearStorage() // 清除本地存储this.historyList = '' // 将关联的数组清空this.show = false // show是控制modal组件的开关 为true时显示，为false为隐藏
当我需要删除这些tag时，我点击垃圾桶的icon，就会触发删除事件。
以上，就是关于搜索历史记录的解析和解决办法，希望对你有所帮助，觉得文章不错可以点赞关注，支持博主。
