Vue3+vant 带你实现常见的历史记录的业务功能

HaushoLin

于 2024-06-05 14:43:11 发布

阅读量717

点赞数 22

分类专栏： Vue3 文章标签：前端 vue.js html5 前端框架 javascript scss typescript

本文链接：https://blog.csdn.net/Steven_Son/article/details/139470169

版权

Vue3 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前言

大部分小伙伴不管是开发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()
})

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 + ',')
	}
}

3、清空所有历史记录

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

const clearHistory = () => {
	showConfirmDialog({
		title: '',
		message: '您确定删除全部历史纪录吗？',
	})
		.then(() => {
			window.localStorage.removeItem('SearchHistory')
			getHistory()
		})
		.catch(() => {})
}

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()
}

完整代码

<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>