本地存储历史搜索逻辑参考

效果图：

代码：

/*本地存储历史搜索逻辑参考*/
<template>
	<view class="all-page" v-if="loading">
		<view class="head-layout" :style="{top:alltop+'px'}">
			<view class="jp-layout">
				<view class="jp-left">
					<!--搜索图标-->
					<image class="jp-icon" src=""></image>
					<input placeholder="请输入关键字" v-model="keyword" @input="calstr()" class="jp-input"
						@confirm="confirm()" />
					<!--清除图标-->
					<view class="iconfont icon-fail jp-img" v-if="keyword!=''" @click.stop="clearKey()"></view>
				</view>
				<view class="jp-right">
					<text>取消</text>
				</view>
			</view>
		</view>
		<view class="head-box" :style="{height:alltop+'px'}"></view>
		<view class="head-box" style="height: 88rpx;"></view>
		<view class="all-layout">
			<view class="all-head">
				<view class="all-word">
					<text>历史记录</text>
				</view>
				<view class="all-txt" @click.stop="clearallArr()">
					<text>清空</text>
				</view>
			</view>
			<view class="all-bot" v-if="showArr.length==0">
				<text>暂无数据</text>
			</view>
			<view class="all-body" v-else>
				<view class="all-box" v-for="(item,index) in showArr" :key="index" @click.stop="useKey(index)">
					<text>{{item}}</text>
				</view>
			</view>
		</view>
		<view class="bot-box"></view>
		<view class="bot-layout"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alltop: 0,
				/*置顶区域的top值*/
				loading: false,
				/*控制页面加载*/

				allArr: [],
				/*历史搜索数组*/
				showArr: [],
				/*历史搜索展示数组*/
				limit: 10,
				/*存储限制*/
				strlimit: 8,
				/*展示长度限制*/
				keyword: "" /*搜索关键字*/
			}
		},
		onLoad() {
			/*验证是否已存在历史搜索数组的缓存*/
			if (uni.getStorageSync("allArr")) {
				this.allArr = uni.getStorageSync("allArr")
				this.calArr()
			}

			uni.getSystemInfo({
				success: (res => {
					this.alltop = res.statusBarHeight
					this.loading = true
				})
			})
		},
		methods: {
			/*对历史搜索数组进行遍历，处理长度超过限制的字符串，赋值给展示数组*/
			calArr() {
				let arr = []
				for (let i = 0; i < this.allArr.length; i++) {
					let str = this.allArr[i]
					let strArr = String(str).split("")
					if (strArr.length > this.strlimit) {
						strArr = strArr.splice(0, this.strlimit - 1)
						arr.push(strArr.join("") + "...")
					} else {
						arr.push(str)
					}
				}
				this.showArr = arr
			},
			/*输入去空格*/
			calstr() {
				let str = this.keyword.replaceAll(" ", "")
				this.$nextTick(() => {
					this.keyword = str
				})
			},
			/*清除关键字*/
			clearKey() {
				this.keyword = ""
			},
			/*点击搜索历史*/
			useKey(index) {
				this.keyword = this.allArr[index]
				this.confirm()
			},
			/*搜索操作*/
			confirm() {
				if (this.keyword == "") {
					uni.showToast({
						title: "未输入关键字",
						icon: "none"
					})
					return
				}
				this.allArr.unshift(this.keyword) /*添加到组头*/
				if (this.allArr.length > 1) {
					this.allArr = Array.from(new Set(this.allArr)) /*去重*/
				}
				if (this.allArr.length > this.limit) {
					/*切割*/
					this.allArr = this.allArr.splice(0, this.limit)
				}
				this.calArr()
				uni.setStorageSync("allArr", this.allArr)
			},
			/*清空历史*/
			clearallArr() {
				this.allArr = []
				this.showArr = []
				uni.removeStorageSync("allArr")
				uni.showToast({
					title: "清除历史成功",
					icon: "none"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all-layout {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		background-color: #ffffff;

		.all-bot {
			width: 100%;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #333333;
		}

		.all-head {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.all-word {
				padding-left: 16rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}

			.all-txt {
				padding: 0 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.all-body {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.all-box {
				background-color: #F6F7F9;
				border-radius: 32rpx;
				padding: 0 24rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 64rpx;
				margin-right: 24rpx;
				margin-bottom: 32rpx;
			}
		}
	}

	.jp-layout {
		width: 100%;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 8rpx 24rpx 16rpx;
		height: 88rpx;
		display: flex;

		.jp-left {
			flex: 1;
			overflow: hidden;
			height: 64rpx;
			border-radius: 32rpx;
			background-color: #F6F7F9;
			box-sizing: border-box;
			padding: 0 16rpx;
			display: flex;
			align-items: center;

			.jp-icon {
				width: 32rpx;
				height: 32rpx;
			}

			/deep/ .jp-input .uni-input-placeholder {
				color: #999999 !important;
			}

			/deep/ .jp-input .uni-input-input {
				color: #333333 !important;
			}

			.jp-input {
				flex: 1;
				font-size: 24rpx;
				line-height: 32rpx;
				height: 32rpx;
				min-height: 32rpx;
				margin-left: 8rpx;
			}

			.jp-img {
				color: #999999;
				font-size: 32rpx;
				margin-left: 8rpx;
			}
		}

		.jp-right {
			width: 96rpx;
			height: 64rpx;
			font-size: 24rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 16rpx;
		}
	}

	.all-page {
		width: 100%;
		overflow: hidden;
		min-height: 100vh;
		background-color: #ffffff;
	}

	.head-layout {
		width: 100%;
		position: fixed;
		top: 0;
	}

	.head-box {
		width: 100%;
	}

	.bot-layout {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.bot-box {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}
</style>