Vue3+vant 带你实现常见的历史记录的业务功能_vue3显示最近10条历史搜索记录

前言

大部分小伙伴不管是开发PC端还是H5移动端，都会遇到历史搜索的功能。对用户的历史记录进行增删查可以是接口，也可以是前端用缓存实现，一般用浏览器缓存实现的比较多，这篇文章就来教你如何用LocalStorage对历史记录数据的存储、获取、删除。
版本号：vue3.3，vant4，css样式以750设计稿去写的。

先看效果图

主要核心功能：获取搜索记录、设置搜索记录、清空所有历史记录、点击搜索

1、获取搜索记录

调用时机：
1、首次进页面先获取缓存的历史记录参数searchHistory
2、删除所有历史记录后重新获取以更新页面。

• 如果没有，则为它生成一个并赋值为空串，为了方便给后面添加。
• 如果有，则将searchHistory以逗号切割为数组，同时过滤掉空串的，供页面遍历历史参数正常展示用。
  处理前：'哈哈哈,哈哈哈2321, , '
  处理后：['哈哈哈','哈哈哈2321']

const searchHistory = ref([]) // 存储历史搜索参数

const getHistory = () => {
	var obj = window.localStorage.getItem('SearchHistory')
	if (obj == null) {
		localStorage.setItem('SearchHistory', '')
		searchHistory.value = []
	} else {
		// 将数组中空串的元素删除返回新数组
		searchHistory.value = obj.split(',').filter(v => v !== undefined && v !== null && v !== '')
	}
	// console.log(searchHistory.value, 'searchHistory.value')
}

onMounted(() => {
	getHistory()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、设置搜索记录

调用时机：这个是在点击搜索时调用的。
先获取SearchHistory，把用户新搜索的值放入用indexOf去重

• 已存在不拼接
• 不存在，则在现有的SearchHistory基础上后面拼接上新搜索参数，并为新搜索参数添加逗号，方便查询时以逗号切割。
  注意：为什么是拼接，因为SearchHistory本身就是一个字符串。

const setHistory = value => {
	var his = window.localStorage.getItem('SearchHistory')
	if (his.indexOf(value) != -1) {
		return false
	} else {
		window.localStorage.setItem('SearchHistory', his + value + ',')
	}
}
1
2
3
4
5
6
7
8

3、清空所有历史记录

直接将整个SearchHistory删除并重新获取，以达到更新的状态。

const clearHistory = () => {
	showConfirmDialog({
		title: '',
		message: '您确定删除全部历史纪录吗？',
	})
		.then(() => {
			window.localStorage.removeItem('SearchHistory')
			getHistory()
		})
		.catch(() => {})
}
1
2
3
4
5
6
7
8
9
10
11

4、点击搜索

将搜索框的值两边去空格后存入缓存中setHistory。
status：1和2是为了实现两个功能

• 1、正常用户点击搜索后直接去到商品列表了，跳转前需要将此查询参数保存起来。
• 2、用户直接在历史记录中点击任意一个就跳转到商品列表（不是点搜索的）。

// storageParams：历史搜索参数
// 1是手动输入查询  2是点击历史查询
const onSearch = (status, storageParams) => {
	let searchTrim = searchVal.value.trim()
	// 如果搜索内容为空并且不存在  或者历史搜索参数为空并且不存在  则弹窗提示用户
	if ((searchTrim == '' && searchTrim == null) || (storageParams == '' && storageParams == null)) {
		showDialog({
			title: '提示',
			message: '没有找到该商品',
		}).then(() => {})
	} else {
		// 手动搜索
		if (status == 1) {
			setHistory(searchTrim)
			// 历史的搜索
		} else if (status == 2 && storageParams) {
		}
	}
	getHistory()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

完整代码

<script setup>
import { onMounted, ref } from 'vue'
import { showDialog, showConfirmDialog } from 'vant'

const searchVal = ref('') // 搜索参数
const searchHistory = ref([]) // 存储历史搜索参数
const isSearchResult = ref(false) // 是否有查询结果  true为有  false为没有

// storageParams：历史搜索参数
// 1是手动输入查询  2是点击历史查询
const onSearch = (status, storageParams) => {
	let searchTrim = searchVal.value.trim()
	// 如果搜索内容为空并且不存在  或者历史搜索参数为空并且不存在  则弹窗提示用户
	if ((searchTrim == '' && searchTrim == null) || (storageParams == '' && storageParams == null)) {
		showDialog({
			title: '提示',
			message: '没有找到该商品',
		}).then(() => {
			// on close
		})
	} else {
		// 手动搜索
		if (status == 1) {
			setHistory(searchTrim)
			// 历史的搜索
		} else if (status == 2 && storageParams) {
		}
	}
	getHistory()
}
// 设置搜索记录
const setHistory = value => {
	var his = window.localStorage.getItem('SearchHistory')
	if (his.indexOf(value) != -1) {
		return false
	} else {
		window.localStorage.setItem('SearchHistory', his + value + ',')
	}
}
// 获取搜索记录
const getHistory = () => {
	var obj = window.localStorage.getItem('SearchHistory')
	if (obj == null) {
		localStorage.setItem('SearchHistory', '')
		searchHistory.value = []
	} else {
		// 将数组中空串的元素删除返回新数组
		searchHistory.value = obj.split(',').filter(v => v !== undefined && v !== null && v !== '')
	}
	// console.log(searchHistory.value, 'searchHistory.value')
}
// 清空所有历史记录
const clearHistory = () => {
	showConfirmDialog({
		title: '',
		message: '您确定删除全部历史纪录吗？',
	})
		.then(() => {
			window.localStorage.removeItem('SearchHistory')
			getHistory()
		})
		.catch(() => {})
}

onMounted(() => {
	getHistory()
})
</script>
<template>
	<div class="container">
		<!-- 搜索 -->
		<div class="searchBox">
			<van-search v-model="searchVal" show-action label="" placeholder="请输入搜索关键词">
				<template #action>
					<div @click="onSearch(1, null)">搜索</div>
				</template>
			</van-search>
		</div>

		<!-- 历史搜索 -->
		<div class="historyBox">
			<div class="titleBox">
				历史搜索
				<span class="delete_sp" @click="clearHistory">
					<van-icon name="delete" />
				</span>
			</div>
			<div class="storageSearchParams">
				<div v-for="(item, index) in searchHistory" :key="index" class="item" @click="onSearch(2, item)">{{ item }}</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.container {
	width: 100%;
	background: white;
	.searchBox {
		padding: 20px 0 20px 24px;
		box-sizing: border-box;
		height: 108px;
		background-color: white;
		.search-content {
			height: 100%;
			display: flex;
			.search-back {
				width: 86px;
				height: 100%;
				text-align: left;
				line-height: 70px;
				font-size: 40px;
				text-indent: 0.1em;
			}
			.search-left {
				flex: 1;
				display: flex;
				position: relative;
				.fixed-icon {
					position: absolute;
					top: 18px;
					left: 20px;
				}
				.ipt-search {
					flex: 1;
					border-radius: 40px;
					background-color: #f7f8fa;
					text-indent: 2.4em;
					font-size: 26px;
					// color: #969799;
				}
			}
			.search-right {
				width: 88px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28px;
			}
		}
	}
	.titleBox {
		font-weight: bold;
		padding-top: 40px;
		margin-left: 1rem;
		font-size: 30px;
		line-height: 40px;
	}
	.storageSearchParams {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 15px;
		.item {
			background-color: #fff;
			padding: 18px;
			color: black;
			border: 1px solid #f7f8fa;
			// border-radius: 20px;
			font-size: 26px;
			margin-right: 10px;
		}
	}
}
::v-deep(.van-search__content) {
	background: #f7f8fa;
}
::v-deep(.van-search__content--round) {
	border-radius: 40px;
}
::v-deep(.van-search__field) {
	align-items: center;
}
.delete_sp {
	float: right;
	font-size: 38px;
	color: rgb(153, 153, 153);
	vertical-align: middle;
	margin-right: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183