UniAPP搜索页面，存储关键词

<template>
	<view class="container">
		<!-- 搜索条 -->
		<!-- <view class="searchTopBox">
			<view class="searchBoxRadius">
				<view class="grace-search-icon searchBoxIcon"></view>
				<input class="searchBoxIpt" type="search" v-model="ipt" @confirm="searchNow($event)" placeholder="关键字"></input>
			</view>
		</view> -->
		<view class="u1">
			<image src="../../static/img/logo.png" mode="" style="width: 128upx; height: 51upx;"></image>
			<view class="sousuo">
				<input type="text" value="" placeholder="请输入关键字搜索" focus="true" v-model="ipt" @confirm="searchNow($event)"/>
				<image src="../../static/img/sousuo.png" mode="" type="search"  @tap="searchNow($event)"></image>
			</view>
		</view> 
		
		
		<!-- 搜索历史 -->
		<view class="searchBotBox">
			<view class="ov">
				<view class="fl">历史搜索</view>
				<view @tap="clearKey" class="fr grace-more-r grace-search-remove">
					<image src="../../static/img/sc.png" mode=""></image>
					</view>
			</view>
			<view class="searchHistoryBox">
				<view class="searchHistoryBoxItem" v-for="(item,index) in searchKey" :key=‘index‘ @click="qusousuo(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				searchKey: [],
				ipt:‘‘,
				searchClose: true,
				jiaodian:true
			}
		},
		onLoad() {
			console.log(this.ipt.length)
		},
		onShow() {
			try{
				var vv = uni.getStorageSync(‘searchLocal‘) || "";
				if(vv) {
					this.searchKey = JSON.parse(vv);
				} else {
					this.searchKey = [];
				}
			} catch(e){
				console.log(e)
			}
		},
		methods: {
			clearKey: function() {
				var that = this;
				uni.showModal({
					title: ‘提示‘,
					content: ‘点击确定将删除所有历史信息，确定删除吗？‘,
					success: function(res) {
						// if (res.confirm) {
							that.searchKey = [];
							uni.setStorage({
								key: ‘searchLocal‘,
								data: that.searchKey
							});
// 						} else if (res.cancel) {
// 
// 						}
					}
				});

			},
			searchNow(e) {
				console.log(e)
				this.jiaodian=false;
				if (this.ipt == ‘‘) {
					uni.showToast({
						title: ‘未输入搜索关键字‘,
						icon: ‘none‘,
						duration: 1000
					});
					return false;
				}
				var that = this;
				var newArr = that.searchKey;
				console.log(newArr.length)
				if(this.searchKey.indexOf(this.ipt) == -1){
					newArr.unshift(this.ipt);
				}
				if(newArr.length >= 11 ){
					newArr.pop()
				}
				console.log(newArr.length)
				newArr = JSON.stringify(newArr);//转换成json格式的数据
				uni.setStorage({
					key: ‘searchLocal‘,
					data: newArr
				});
				this.qusousuo(this.ipt);
			},
			qusousuo(e){
				console.log(e);
				this.ipt = "";
				uni.navigateTo({
					url:‘sousuo2?goods_name=‘+e
				})
			}
		}
	
	}
</script>
<style lang="scss">
	.container{
		padding-left:30upx;
		padding-right: 30upx;
		// background: pink;
	}
	.u1{
		display: flex;
		justify-content: space-between;
		padding-top: 20upx;
		padding-bottom: 15upx;
		.sousuo{
			display: flex;
			position: relative;
			input{
				font-size: 24upx;
				line-height: 28upx;
				border-bottom:1px solid #f5f5f5;
				width: 515upx;
			}
			image{
				width: 35upx;
				height: 35upx;
				position: absolute;
				right: 30upx;
				z-index: 3;
			}
		}
	}
	
	page {
		background: #FFF;
	}

	.ov {
		overflow: hidden;
	}

	.fl {
		float: left;
		font-family: PingFang-SC-Medium;
		font-size: 16px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 20px;
		letter-spacing: 0px;
		color: #666666;
	}

	.fr {
		float: right;
	}
	.fr image{
		width:35upx;
		height: 37upx;
	}
	.searchTopBox {
		width: 100%;
		background-color: #0b877f;
		height: 100upx;
		box-sizing: border-box;
		padding-top: 15upx;
	}

	.searchBoxRadius {
		width: 90%;
		height: 70upx;
		background-color: #fff;
		margin-left: 5%;
		overflow: hidden;
		border-radius: 35upx;
	}

	.searchBoxIcon {
		font-size: 40upx;
		margin-top: 20upx;
		margin-left: 20upx;
		float: left;
	}

	.searchBoxIpt {
		height: 70upx;
		line-height: 70upx;
		margin-left: 20upx;
		float: left;
	}

	.searchBotBox {
		width: 100%;
		margin-top: 30upx;
		padding: 15upx 3%;
		box-sizing: border-box;
	}

	.searchHistoryBox {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		margin-top: 40upx;
	}

	.searchHistoryBoxItem {
		float: left;
		font-size: 26upx;
		color: #666;
		line-height: 49upx;
		height: 50upx;
		padding: 0 20upx;
		border-radius: 50upx;
		margin:15upx 30upx 15upx 0;
		border: 1px solid #ccc;
		text-align: center;
	}
</style>