uni小程序搜索历史

直接上代码
html部分：

搜索框部分

<view class="u1">
			<view class="sousuo">
				<input type="text" value="" placeholder="请输入关键字搜索" focus="true" v-model="text" @confirm="searchText($event)" />
				<image src="../../static/image/sou2.png" mode="" type="search" @tap="searchNow($event)"></image>
			</view>
			<view class="cancel" @click="before">取消</view>
</view>

搜索历史展示部分

		<view class="searchBotBox">
			<view class="ov">
				<view class="shan">
					<view class="fl">历史搜索</view>
					<!-- <image src="../../static/shan.png" mode=""></image> -->
				</view>
				<view @tap="clearHistory" class="fr grace-more-r grace-search-remove">
					<image src="../../static/image/shan.png" mode=""></image>
				</view>
			</view>
			<view class="searchHistoryBox">
				<view class="searchHistoryBoxItem" v-for="(item,index) in searchKey" :key='index' @click="goSearch(item)">
					{{item}}
				</view>
			</view>
		</view>

js部分

在每次进入页面的时候取出本地缓存

			uni.getStorage({
				key: 'searchLocal',
				success: (res) => {
					if(res.data != ''){
						console.log(JSON.parse(res.data))
						//把字符串转换为对象
						this.searchKey = JSON.parse(res.data)
					}  
				},
				fail: (err) => {
					console.log(err);
				}
			})

				点击搜索的方法

			searchNow(e,val) {
				//val = this.text.trim()//清除空格
				//清除搜索字的显示隐藏
				this.jiaodian = false;
				if (this.text== '') {
					uni.showToast({
						title: '未输入搜索关键字',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				var that = this;
				var newArr = that.searchKey;
				//如果有搜索相同的话，先删除，再添加新的
				if (this.searchKey.indexOf(this.text) == -1) {
					newArr.unshift(this.text);
				}
				//超过11个就删除最后一个，保留11个
				if (newArr.length >= 11) {
					newArr.pop()
				}
				newArr = JSON.stringify(newArr); //转换成json格式的数据
				uni.setStorage({//将搜索的值添加到本地缓存
					key: 'searchLocal',
					data: newArr
				});
				//请求搜索接口
				var serverUrl = that.serverUrl
				uni.request({
					url: serverUrl + '/search',
					method: "POST",
					data: {
						key_word: that.text,
						uid: that.uid
					},
					success: (res) => {
						console.log(res.data.data)
						this.text = ''
					}
				})
				//点击直接去搜索
				this.goSearch(this.text);
			},

			点击搜索历史出发的方法

			goSearch(e) {
				this.text= "";
				// uni.navigateTo({
				// 	// url: 'sousuo2?goods_name=' + e
				// })
			}

				删除搜索历史的方法

			clearHistory() {
				var that = this;
				var serverUrl = that.serverUrl;
				uni.showModal({
					title: '提示',
					content: '点击确定将删除所有历史信息，确定删除吗？',
					success: function(res) {//点击确定删除搜索历史
						uni.request({
							url: serverUrl + '/del_history',
							method: "POST",
							success: () => {
								that.searchKey = [];
								uni.setStorage({
									key: 'searchLocal',
									data: that.searchKey
								});
							}
						})
					}
				});
			},

用到的主要是uni.getStorage和uni.setStorage
用到的数组api
split（’ , '）：将字符串按照需要分割成数组，且返回该数组
indexOf( ’ n ’ )：查找元素，未找到返回-1
unshift( ’ n ’ ):添加一个元素n至数组的最前面，并返回数组的长度，改变原数组
pop():删除数组的最后一个元素，并且改变原数组

css部分

	.content {
		background-color: #FFFFFF;
	}

	.u1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 120rpx 30rpx 15rpx 30rpx;

		.sousuo {
			display: flex;
			position: relative;
			width: 572rpx;
			height: 56rpx;
			align-items: center;
			background-color: #ccc;
			border-radius: 20rpx;

			input {
				font-size: 24upx;
				width: 515upx;
				text-indent: 1rem;
				line-height: 56rpx;
				padding-left: 8rpx;
			}

			image {
				width: 35upx;
				height: 35upx;
				position: absolute;
				right: 30upx;
				z-index: 3;
			}
		}

		.cancel {
			height: 26rpx;
			font-size: 28rpx;
		}
	}

	page {
		background: #FFF;
	}

	.ov {
		display: flex;
		justify-content: space-between;
		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;
	}

	.shan {
		display: flex;
		justify-content: space-between;
	}

	.shan image {
		width: 25rpx;
		height: 29rpx;
		border: 1px solid red;
	}

	.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;
	}

	.searchHistoryBoxItem {
		float: left;
		line-height: 23rpx;
		padding: 20rpx;
		margin: 0rpx 30rpx 15rpx 0;
		text-align: center;
		height: 23rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		background: rgba(228, 205, 162, 1);
		border-radius: 16rpx;
	}