需求:定义了一个history[]数组用来接收搜索历史并显示在页面上
1.如果把搜索历史push进数组中存在两个问题
问题一:最新的搜索历史会排在数组后面,应该显示最前面
问题二:搜索历史中会有重复问题
2.解决方案
用js中unshift()把搜索历史加到数组最前面
用set集合可以去掉重复
this.history.unshift(this.kw) //this.kw是获取搜索值
const set=new Set(this.history)
this.history=Array.from(set)
思路:先加入数组前面,这是会有重复,然后在经过一次set,把数组中重复去掉
Array.from把类数组或对象转化为真正的数组
3.将数组元素(搜索历史)持久化储存到本地
// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
uni.setStorageSync('kw', JSON.stringify(this.historyList))
在 onLoad
生命周期函数中,加载本地存储的搜索历史记录:
onLoad() {
this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
}
4.点击清除历史记录
cleanHistory(){
this.historyList=[]
uni.setStorageSync('kw','[]')
}
5.点击搜索历史进行跳转