Uniapp中实现搜索历史记录展示

最新推荐文章于 2025-03-29 20:13:17 发布

随风飘bill

最新推荐文章于 2025-03-29 20:13:17 发布

阅读量570

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/u013114610/article/details/134079086

版权

本文描述了一个使用Vue.js开发的应用场景，通过记录用户搜索历史，实现倒序显示并支持点击搜索。当用户输入新搜索词时，会存储到本地并自动管理展示条数，以提供便捷的搜索体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户搜索时，记录用户搜索的历史记录，倒序排列，点击对应的搜索记录文字，也能进行搜索。效果如下图：

<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>