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

<template><view><view class="zhuangbox u-flex"><u--inputplaceholder="请输入关键字搜索"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>