用户搜索时,记录用户搜索的历史记录,倒序排列,点击对应的搜索记录文字,也能进行搜索。效果如下图:
<script>
export default {
data() {
return {
historyLIst:[],
productNames:["测试1","测试2","测试3","测试4","测试5","测试6"]
}
},
onLoad() {
//进入搜索页面时将存储在本地的历史记录取出并展示
let history = uni.getStorageSync("history");
if(history){
this. historyList = JSON.parse(history);
console.log(this.historyList)
}
},
methods: {
doSearch(searchStr){//用户搜索时将搜索文字存储
this.historyList = this.historyList.concat(searchStr);//将搜索内容存储在Array中
this.historyList = Array.from(new Set(this.historyList.reverse()));//反转数组及去除数组中的重复搜索的相同文字
if(this.historyList.length>6){
this.historyList = this.historyList.slice(0,6);//设置展示的历史搜索记录的个数
}
uni.setStorageSync("history",JSON.stringify(this.historyList));//将历史记录存储在本地localStorage中
}
}
}
</script>