Uniapp中实现搜索历史记录展示_uni 如何把本地存储的数据拿出来,并显示在搜索历史

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

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