uniapp通过本地缓存实现历史搜索记录

首先画好样式

下面的图标引入的是iconfont里面的，如何引入点我

<template><view><view class="search_input"><u-search ref="search" placeholder=" 请输入搜索内容" v-model="keyword" :show-action="false"clearabled @search="keySearch(keyword)" @clear="clearSearch" :focus="true"></u-search></view><view>//用来判断历史搜索没有值的时候就不显示<view class="history" v-if="searchHistoryList.length>=1"><view class="iconfont icon-lishi:before" style="width: 17rpx;display: inline;"></view><text class="history_text">历史搜索</text><view class="iconfont icon-lajitong2:before" style="float: right;margin-right: 20rpx;"@click="clearHistory()"></view><view class="history_viewContent"><view class="history_view" v-for="(item,index) in searchHistoryList" :key="index"@click="itemSearch(item)">{{item}}</view></view></view></template>
<script>export default {data() {return {keyword: '',searchHistoryList: [],}},methods: {// 小图标清空历史搜素clearHistory() {uni.showToast({title: '已清空'});uni.removeStorage({key: 'searchList'});this.searchHistoryList = [];},// 搜索的事件keySearch(keyword) {if (keyword == '') {uni.showModal({title: '搜索内容不能为空'});} else {//判断数组里面是否有重复的搜索内容，有的话就删除之前的，把现在搜索的放在数组的前面if (this.searchHistoryList.includes(keyword)) {let i = this.searchHistoryList.indexOf(keyword);this.searchHistoryList.splice(i, 1);//把现在搜索的放在数组的前面this.searchHistoryList.unshift(keyword)} else {this.searchHistoryList.unshift(keyword)uni.setStorageSync('searchList',JSON.stringify(this.searchHistoryList))}}}},//每次进入页面的时候拿到存进去的缓存onShow() {this.searchHistoryList = JSON.parse(uni.getStorageSync('searchList') || '[]')console.log('onshow', this.searchHistoryList)}}

看效果

重点在搜索的事件里面

判断是否输入，未输入提示一下
判断是否输入重复内容
通过uni.setStorageSync('searchList', JSON.stringify(this.searchHistoryList)) 保存（这里转化了一下保存进去，取出来的时候也要转化）
uni.setStorageSync

// 搜索的事件keySearch(keyword) {if (keyword == '') {uni.showModal({title: '搜索内容不能为空'});} else {if (this.searchHistoryList.includes(keyword)) {let i = this.searchHistoryList.indexOf(keyword);this.searchHistoryList.splice(i, 1);this.searchHistoryList.unshift(keyword)} else {this.searchHistoryList.unshift(keyword)uni.setStorageSync('searchList', JSON.stringify(this.searchHistoryList))}}},

onshow取出缓存的值

搜索完之后每次进入页面都会进入这个方法，在这里取出缓存再赋值展现

onShow() {this.searchHistoryList = JSON.parse(uni.getStorageSync('searchList') || '[]')console.log('onshow', this.searchHistoryList)}

完成效果（完整代码）

<template><view><view class="search_input"><u-search ref="search" placeholder="             问答,合同,操作指引,注意事项" v-model="keyword" :show-action="false"clearabled @search="keySearch(keyword)" @clear="clearSearch" :focus="true"></u-search></view><view v-show="historySearchDetail"><view class="history" v-if="searchHistoryList.length>=1"><view class="iconfont icon-lishi:before" style="width: 17rpx;display: inline;"></view><text class="history_text">历史搜索</text><view class="iconfont icon-lajitong2:before" style="float: right;margin-right: 20rpx;"@click="clearHistory()"></view><!-- <u-empty mode="search" style="font-size: 18rpx;" v-if="searchHistoryList.length<1"></u-empty> --><view class="history_viewContent"><view class="history_view" v-for="(item,index) in searchHistoryList" :key="index"@click="itemSearch(item)">{{item}}</view></view></view><view class="fire_search"><view class="iconfont icon-huore-s:before" style="width: 17rpx;display: inline;color: red;"></view><text class="fire_text">大家都在搜</text><view class="fire_viewContent"><view class="fire_view" v-for="(item,index) in fireDataSearch" :key="index">{{item.name}}</view></view></view><view class="history_hr"><view class="h_content"><view class="h_title">HR人事</view><view class="h_view_wrap"><view class="h_view" v-for="(item,index) in hData" :key="index">{{item.name}}</view></view></view></view><view class="shareBtn"><u-button shape="circle" :ripple="true" open-type="share">分享知识库给小伙伴</u-button></view></view><view class="tabPage" v-if="tabPageDetail"><u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs><u-cell-group><u-cell-item icon="setting-fill" title="如何认定事实劳动关系？" @click="cellClick"></u-cell-item><u-cell-item icon="integral-fill" title="会员等级" value="hr人事"></u-cell-item></u-cell-group><!-- <view v-if="current == 1"><u-cell-group><u-cell-item icon="setting-fill" title="个人设置2"></u-cell-item><u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item></u-cell-group></view><view v-if="current == 2"><u-cell-group><u-cell-item icon="setting-fill" title="个人设置3"></u-cell-item><u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item></u-cell-group></view><view v-if="current == 3"><u-cell-group><u-cell-item icon="setting-fill" title="个人设置4"></u-cell-item></u-cell-group></view> --></view></view>
</template>
<script>export default {data() {return {//tab页的切换tabPageDetail: false,// 历史搜索的默认页historySearchDetail: true,list: [{name: '问答'}, {name: '文档'}, {name: '流程'// count: 5}, {name: '注意事项'}],current: 0,keyword: '',searchHistoryList: [],fireDataSearch: [{name: '经济补偿金'}, {name: '应聘登记'}, {name: '招聘'}, {name: '应聘登记'}, {name: '劳动关系'}],hData: [{name: '招聘与录用'}, {name: '劳动合同管理'}, {name: '薪酬管理'}, {name: '工会制度'}, {name: '特殊用工关系'}, {name: '培训保密竞业'}, {name: '招聘与录用'}, {name: '招聘与录用'}, {name: '招聘与录用'}, ]}},methods: {// 清空历史搜素clearHistory() {uni.showToast({title: '已清空'});uni.removeStorage({key: 'searchList'});this.searchHistoryList = [];},cellClick(index) {console.log('点击cell', index)uni.navigateTo({url: '/pages/knowledge/details/details',});},onShareAppMessage(res) {if (res.from === 'button') { // 来自页面内分享按钮console.log(res.target)}return {title: '分享知识库',path: '/pages/knowledge/index/index'}},itemSearch(item) {this.keyword = itemthis.keySearch(item)},// 搜索的事件keySearch(keyword) {if (keyword == '') {uni.showModal({title: '搜索内容不能为空'});} else {this.historySearchDetail = falsethis.tabPageDetail = trueif (this.searchHistoryList.includes(keyword)) {let i = this.searchHistoryList.indexOf(keyword);this.searchHistoryList.splice(i, 1);this.searchHistoryList.unshift(keyword)} else {this.searchHistoryList.unshift(keyword)uni.setStorageSync('searchList', JSON.stringify(this.searchHistoryList))}}},// 搜索的清空clearSearch() {this.historySearchDetail = truethis.tabPageDetail = false},change(index) {this.current = index}},onShow() {this.searchHistoryList = JSON.parse(uni.getStorageSync('searchList') || '[]')console.log('onshow', this.searchHistoryList)}}
</script><style scoped lang="scss">.search_input {margin-top: 20rpx;}.history {margin-top: 20rpx;}.history_text {margin-left: 10rpx;font-size: 12px;}.history_viewContent {width: 100%;flex-wrap: wrap;justify-content: space-between;display: flex;padding: 0 40rpx;}.history_viewContent:after {content: '';width: 30%;}.history_view {background-color: #E2E0E0;padding: 4rpx 20rpx 4rpx 20rpx;margin-top: 20rpx;min-width: 200rpx;flex-shrink: 0;border: 1px solid grey;border-radius: 15rpx;text-align: center;}.fire_text {margin-left: 10rpx;font-size: 12px;}.fire_search {margin-top: 20rpx;}.fire_viewContent {width: 100%;flex-wrap: wrap;justify-content: space-between;display: flex;padding: 0 40rpx;}.fire_view {background-color: #E2E0E0;padding: 4rpx 20rpx 4rpx 20rpx;margin-top: 20rpx;min-width: 200rpx;flex-shrink: 0;border: 1px solid grey;border-radius: 15rpx;text-align: center;}.fire_viewContent:after {content: '';width: 30%;}.history_hr {width: 95%;margin-top: 40rpx;// text-align: center;height: 300rpx;padding-left: 10rpx;padding-right: 10rpx;// overflow:hidden;border-radius: 20rpx;border: 1px solid grey;margin-left: auto;margin-right: auto;}.h_content {margin-top: 20rpx;}// 这里是hr人事的.h_title {margin-left: 20rpx;}.h_view_wrap {display: flex;text-align: center;width: 100%;flex-wrap: wrap;justify-content: space-between;float: left;}.h_view {border: 1px solid grey;margin-top: 20rpx;min-width: 200rpx;border-radius: 20rpx;padding: 4rpx 20rpx 4rpx 20rpx;}.shareBtn {border-radius: 10rpx;padding: 10rpx;position: fixed;left: 50%;transform: translateX(-50%);bottom: 0;}.tabPage {width: 100%;margin-top: 20rpx;}
</style>

这是整个页面

uniapp通过本地缓存实现历史搜索记录相关推荐

微信小程序实现历史搜索记录的本地储存和删除
输入框和搜索按钮表单的wxml,没啥特别的,这里绑定了输入框的输入值,样式我就不放上来了 <form class='searchForm' bindsubmit='searchSubmitFn' ...
uni-app使用setStorageSync存储历史搜索记录，与setStorage区别
一.setStorageSync与setStorage的区别都可以将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容. setStorageSync:同步接口,需要 ...
Android 天气APP（十五）增加城市搜索、历史搜索记录
上一篇:Android 天气APP(十四)修复UI显示异常.优化业务代码逻辑.增加详情天气显示添加城市新版------------------- 一.推荐城市数据二.推荐城市item布局和适配器 ...
Android原生控件SearchView实现历史搜索记录
SearchView实现搜索记录看了一些大神写的贴子简单实现, 但我们功能需要单独删除一条历史搜索记录,好像没在网上找到解决方案,原生方法上也只有suggestions.clearHistory() ...
App开发-使用Vue3+Vant组件实现历史搜索记录功能
使用Vue3+Vant组件实现App历史搜索记录功能最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue ...
实现历史搜索记录和搜索功能
uniapp实现搜索功能和搜索历史记录 <template><view class="content"><!-- 搜索引擎这里是模糊查询,后续会加上 ...
vue 移动端搜索功能（带历史搜索记录）
实现效果如图: 实现的功能: 1.点击搜索,把搜索的值存入本地记录,并展示 2.搜索相同的值,要删除旧数据,把新数据放进数组首位 3.清空历史记录 html代码: <div class=&quo ...
Android开源实战：简单好用、含历史搜索记录的智能搜索框
前言 Android开发中,类似下图的搜索功能非常常见今天,我将带来一款封装了历史搜索记录功能 & 样式的Android 自定义搜索框开源库,希望你们会喜欢. 已在Github开源: ...
【玩转SQLite系列】(六)SQLite数据库应用案例实现历史搜索记录
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53366564 本文出自[DylanAndroid的博客] [玩转SQLite系 ...

uniapp通过本地缓存实现历史搜索记录

首先画好样式

看效果

重点在搜索的事件里面

onshow取出缓存的值

完成效果（完整代码）

uniapp通过本地缓存实现历史搜索记录相关推荐

最新文章

热门文章