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

前言

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