我们在进行一些项目开发时，很有可能会涉及到在搜索框中搜索某一个词条，从而进行相应的检索。
在这里就会出现一个优化功能，我们在搜索后的某一个词条，我希望能够显示在历史记录中。这样一个小的tip，可以给用户带来更高的使用体验。
历史记录并不会保存在后端，因为历史记录本身体积小，也为了方便对其操作，一般保存在本地中。
该功能重要方法为本地存取，代码如下：
// 微信小程序的文档中有对本地存储的功能简述
wx.setStorage({
key: 'history',
data: JSON.stringify(val)
})
key：你存在本地缓存中的key
data：你存在本地缓存中的数据，注意，这里存进去的时JOSN对象，需要做转型处理小程序本地存储
https://developers.weixin.qq.com/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.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorage.html
需求分析：
搜索历史应该包含以下效果：
1.空格无效
2.存储词条
3.删除词条
4.获取词条
我们在搜索框中输入词条后，跳转到某个页面返回后它应该显示在历史记录的位置，并且不论我跳转到了哪个页面，我都应该能够保留这个词条信息，而且我能够删除这些词条。
注意，该功能基于uview框架开发。
<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"
showConfirmButton
showCancelButton
:content='content'
@close="close"
@cancel="close"
@confirm="delTags">
</u-modal>
</view>
</template>在这里样式不做赘述，只研究功能的实现，
注意看，我在search组件中使用了双向绑定，当我在对value做操作时，value的数据会进行同步，当我确认好我输入的词条后，触发@search事件，
<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 = this
wx.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 = ''
},
// 是否展示modal
showModal() {
this.show = true
},
// 是否关闭modal
close() {
this.show = false
},
// 删除tags
delTags() {
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个字符拼接上...。
// 删除tags
delTags() {
wx.clearStorage()
this.historyList = ''
this.show = false
}
wx.clearStorage() // 清除本地存储
this.historyList = '' // 将关联的数组清空
this.show = false // show是控制modal组件的开关 为true时显示，为false为隐藏当我需要删除这些tag时，我点击垃圾桶的icon，就会触发删除事件。
以上，就是关于搜索历史记录的解析和解决办法，希望对你有所帮助，觉得文章不错可以点赞关注，支持博主。