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

javascript 复制代码
<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>
相关推荐
游戏开发爱好者82 小时前
苹果iOS26系统升级:液态玻璃与智能功能全解析
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
2501_915918419 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
用户9047066835719 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
乔冠宇20 小时前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡20 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa20 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名1 天前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
游戏开发爱好者81 天前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915106321 天前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview