【uniapp 样式】使用setStorageSync存储历史搜索记录

<template>
	<view>
		<view class="zhuangbox u-flex">
			 <u--input
					placeholder="请输入关键字搜索"
					border="surround"
					shape='circle'
					prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399"
					v-model="inputVal"
					@confirm='searchFun'
				></u--input>
			<text class="u-m-l-30 u-color-8D4 u-f-s-26" @click="cancelFun">取消</text>
		</view>	
		<view class="search-keyword">
			<scroll-view class="keyword-box" scroll-y>
				<view class="keyword-block">
					<view class="u-flex u-row-between u-p-t-30 u-p-b-30 u-tips-color">
						<view class="title">历史搜索</view>
						<view @tap="oldDelete">
							<image src="@/static/img/shanchu.png" mode="" class="u-w-40 u-h-40"></image>
						</view>
					</view>
					<view class="u-flex u-flex-wrap">
						<view class="u-m-r-15 u-m-b-15" v-for="(keyword, index) in list" @tap="doSearch(keyword)" :key="index">
							
							<view class="neirong">{{keyword}}</view>
						</view>
					</view>
				</view>
		
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputVal:'',
				list:[],
			}
		},
		onShow() {
			this.inputVal = '';
			this.getSearchStorage();
		},
		methods: {
			searchFun(){
				if(!this.inputVal.trim()){
					this.$u.toast('请输入关键词')
					return;
				}
				this.setSearchStorage(this.inputVal);
				this.gopage('/pagesA/index/list?keyword='+ this.inputVal);
			},
			// 取消
			cancelFun(){
				this.inputVal = '';
			},
			doSearch(value) {
				if(!value.trim()){
					this.$u.toast('请输入关键词')
					return;
				}
				this.active = true;
				this.inputVal = value;
				this.gopage('/pagesA/index/list?keyword='+value)
			},		
			// 删除历史搜索数据
			oldDelete(){
				uni.setStorageSync('search_key','');
				this.list = [];
			},
			// 本地缓存 搜索历史
			setSearchStorage(searchkey) {
				// 存一个数组类型
				// 先取出本地缓存的数据
				let searchArr=uni.getStorageSync('search_key')||[]
				// 从前面插入
				searchArr.unshift(searchkey)
						
				uni.setStorageSync('search_key',searchArr)
			},
			// 取出本地缓存数据并显示,不会自动执行，放到生命周期函数中
			getSearchStorage() {
				let getData = uni.getStorageSync('search_key')
				// 数组去重
				let setData = [...new Set(getData)]
				this.list = setData;
			},
			gopage(url) {
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>
<style lang="scss">
	.zhuangbox{
		background: #FFFFFF;
		padding: 0 32rpx;
		.u-input{
			padding-left: 30rpx !important;
			background-color:$uni-bg-color-grey;
		}
		.u-input.u-border{
			border-color: transparent !important;
		}
	}
</style>
<style lang="scss" scoped>
.search-keyword{
	padding:0 30rpx 30rpx;
	.keyword-block{
		padding-bottom: 30rpx;
	}
}
.zanwu{
	margin: 0 auto;
}
.title{
	font-size: 28rpx;
	font-weight: 500;
	color: #181818;
}
.neirong{
	background: #F5F5F5;
	border-radius: 28rpx;
	padding: 10rpx 34rpx;
	font-size: 26rpx;
	color: #181818;
}
.u-flex{
	display: flex;
	align-items: center;
}
.wrap,.u-flex-wrap{
	flex-wrap: wrap;
}
.flex_jus_between,.u-row-between{
	justify-content:space-between;
}
.u-m-l-30{
	margin-left:30rpx;
}
.u-m-r-15{
	margin-right:15rpx;
}
.u-m-b-15{
	margin-bottom:15rpx;
}
.u-p-t-30{
	padding-top:30rpx;
}
.u-p-b-30{
	padding-bottom:30rpx;
}
.u-w-40{
	width:40rpx;
}
. u-h-40 {
	height:40rpx;
}


</style>