uniApp学习之热门搜索，搜索数据页面缓存实例

<template>
	<view class="keyword">
		<view class="title">
			热门搜索
		</view>
		<view class="tag-list">
			<view v-for="(item,index) in hostList" :key='index' @click="clickHandler(item)">
				{{item}}
			</view>
		</view>
		<view class="title space-between">
			<text>搜索历史</text>
			<text @click="clearHistory">清空历史</text>
		</view>
		<view class="tag-list">
			<view v-for="(item,index) in historyList" :key='index' @click="clickHandler(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>
<script>
	const key = 'history_key'
	export default {
		data() {
			return {
				hostList: ['java', 'python', 'springBoot', 'SpringCloud'], //热门搜索数据接口
				// 历史搜索,拿本地的key
				historyList: uni.getStorageSync(key)
			}
		},
		methods: {
			clearHistory() {
				this.historyList = []
				uni.clearStorageSync(key)
			},
			clickHandler(item) {
				// 
				// #ifdef APP-PLUS
				// 获取当前页面实例
				const currentWebview = this.$mp.page.$getAppWebview();
				currentWebview.setTitleNViewSearchInputText(item)
				// #endif
				// #ifdef H5
				// 清空选择框内容
				const placeholde = document.querySelector('.uni-page-head-search-placeholder')
				placeholde.innerHTML = ''
				const inputsearch = document.querySelector('.uni-input-input[type=search]')
				inputsearch.value = item
				// #endif
				//点击之后向父组件传入,通过key=ziChuanfu向父组件传参，并调用父组件的方法
				this.$emit('ziChuanfu', {
					value: item
				})
			}
		}
	}
</script>
<style lang="scss">
	.keyword {
		padding: 25rpx;
		.title {
			font-size: 30rpx;
			color: #222222;
			text:last-child {
				color: #999;
			}
		}
		.tag-list {
			display: flex; //flex布局一行显示
			flex-wrap: wrap; //flex布局自动换行
			margin-top: 20rpx;
			margin-bottom: 60rpx;
			view {
				font-size: 25rpx;
				color: #999;
				border: 1rpx solid #999;
				border-radius: 8rpx;
				padding: 6rpx 15rpx;
				margin: 10rpx;
				overflow: hidden; //文字超出隐藏
				white-space: nowrap;
				text-overflow: ellipsis; //超出部分省略号显示
			}
		}
	}
</style>

<view class="tag-list">
			<view v-for="(item,index) in hostList" :key='index' @click="clickHandler(item)">
				{{item}}
			</view>
		</view>

hostList: ['java', 'python', 'springBoot', 'SpringCloud'], //热门搜索数据接口

        <view class="title space-between">
			<text>搜索历史</text>
			<text @click="clearHistory">清空历史</text>
		</view>
		<view class="tag-list">
			<view v-for="(item,index) in historyList" :key='index' @click="clickHandler(item)">
				{{item}}
			</view>
		</view>

// 历史搜索,拿本地的key
historyList: uni.getStorageSync(key)

clickHandler(item) {
				// 
				// #ifdef APP-PLUS
				// 获取当前页面实例
				const currentWebview = this.$mp.page.$getAppWebview();
				currentWebview.setTitleNViewSearchInputText(item)
				// #endif
				// #ifdef H5
				// 清空选择框内容
				const placeholde = document.querySelector('.uni-page-head-search-placeholder')
				placeholde.innerHTML = ''
				const inputsearch = document.querySelector('.uni-input-input[type=search]')
				inputsearch.value = item
				// #endif
				//点击之后向父组件传入,通过key=ziChuanfu向父组件传参，并调用父组件的方法
				this.$emit('ziChuanfu', {
					value: item
				})
			}

const currentWebview = this.$mp.page.$getAppWebview();
currentWebview.setTitleNViewSearchInputText(item)

// #ifdef H5
				// 清空选择框内容
				const placeholde = document.querySelector('.uni-page-head-search-placeholder')
				placeholde.innerHTML = ''
				const inputsearch = document.querySelector('.uni-input-input[type=search]')
				inputsearch.value = item
				// #endif

//点击之后向父组件传入,通过key=ziChuanfu向父组件传参，并调用父组件的方法
				this.$emit('ziChuanfu', {
					value: item
				})

<keyword @ziChuanfu='doSearch' v-if="searched"></keyword>

methods: {
			doSearch(obj) {
				// obj && obj.value 是否是小程序传递的搜索关键字
				this.content = obj && obj.value ? obj.value : this.content
				console.log('dosearch的内容', this.content)
				// uni.showLoading()
				// 小程序赋值的问题，
				// #ifdef MP
				this.$refs.searchBar.searchVal = this.content
				// #endif
				this.storageHistory()
				this.searched = false
			},
			storageHistory() {
				const key = 'history_key'
				// 获取本地存在的记录
				// 异步获取数据
				uni.getStorage({
					key,
					success: (res) => {
						console.log("原历史关键字", res.data)
						// 查询原历史关键字数组，判断数组中是否存在关键字
						//如果不存在则添加到数组第一个元素，存在则不添加
						// 逻辑结构为content不为空，数组中不包含这个元素，则添加到第一个元素
						this.content && res.data.indexOf(this.content) < 0 && res.data.unshift(this.content)
						uni.setStorageSync(key, res.data)
					},
					fail: (err) => {
						// 第一个满足则进行&&后面的
						this.content && uni.setStorageSync(key, [this.content])
					}
				})
			}
		}
	}

// 监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputChanged(e) {
			console.log("输入的内容", e.text)
			this.content = e.text
		},
		// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
		onNavigationBarSearchInputConfirmed(e) {
			console.log("确认的内容", e.text)
			// #ifdef APP-PLUS
			currentWebview.setTitleNViewSearchInputFocus(false)
			// #endif
			this.doSearch()
		},

this.content = obj && obj.value ? obj.value : this.content
console.log('dosearch的内容', this.content)

// #ifdef MP
	this.$refs.searchBar.searchVal = this.content
// #endif

storageHistory() {
				const key = 'history_key'
				// 获取本地存在的记录
				// 异步获取数据
				uni.getStorage({
					key,
					success: (res) => {
						console.log("原历史关键字", res.data)
						// 查询原历史关键字数组，判断数组中是否存在关键字
						//如果不存在则添加到数组第一个元素，存在则不添加
						// 逻辑结构为content不为空，数组中不包含这个元素，则添加到第一个元素
						this.content && res.data.indexOf(this.content) < 0 && res.data.unshift(this.content)
						uni.setStorageSync(key, res.data)
					},
					fail: (err) => {
						// 第一个满足则进行&&后面的
						this.content && uni.setStorageSync(key, [this.content])
					}
				})
			}