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

最新推荐文章于 2024-07-17 18:17:15 发布
最新推荐文章于 2024-07-17 18:17:15 发布
阅读量2.3k 收藏 18
点赞数 7
分类专栏： uniapp 文章标签： 缓存 小程序 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45018844/article/details/120845301
版权
本文介绍了如何使用uni-app进行历史搜索记录的本地缓存操作。通过设置样式，结合uni.setStorageSync存储搜索关键词，并在onshow事件中读取缓存展示历史记录。文中还涉及到输入判断及防止重复内容的处理。
摘要由CSDN通过智能技术生成

首先画好样式

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

<template>
	<view>
		<view class="search_input">
			<u-search ref=
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小莉爱编程
关注
专栏目录
订阅专栏
uni-app - 详细实现搜索框+ 历史记录功能，每次搜索时都会留下历史记录并且支持一键清空（类似美团淘宝等平台的搜索框，点击进入一个新页面进行搜索并留下搜索记录功能），提供详细示例源码，一键复制！
王佳斌
08-02 3850
uni-app，微信小程序，h5网页网站，安卓苹果app，详细实现搜索框和历史记录功能，前端如何实现搜索历史记录，搜索历史记录功能（纯前端实现），，uniapp实现搜索历史功能，搜索-历史记录，前端怎么如何实现搜索历史记录，uni-app搜索历史记录功能实现，搜索、历史记录功能简单实现，实现搜索商品和历史记录的功能，Uni-app实现历史搜索，uni-app使用setStorageSync存储历史搜索记录，搜索页功能模块，uniapp实现搜索功能详细步骤前端开发，uniapp中实现搜索功能和历史记录，uni
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件（下） -- 搜索历史
m0_67393413的博客
07-31 462
??欢迎来到?????魔术之家！！??该文章收录专栏专栏内容。
uniapp 前端获取历史搜索记录
技术不够，加班来凑
06-21 1213
场景：搜索页，搜索栏下方的历史搜索 场景分析：每次搜索的关键词都要放到历史搜索里面，首页关键词是要定义的keyname，这个关键词可以放到cookie或者sessionStory里面，我用的uniapp，放到了本地缓存里面，实现方式： 获取搜索词 添加历史搜索 清除历史搜索 获取历史搜索，代码中去掉重复的搜索词 getHistory(keyname) { let that = this let words = '' if(uni.getStorageSync(keyname
uni-app - 详细实现搜索框+ 历史记录功能+点击历史记录快速重新搜索
最新发布
wssen321的博客
07-17 552
搜索
uniapp搜索之历史记录
m0_54009761的博客
06-29 988
custom(value) { // 搜索事件 if (!value) { // this.$common.errorToShow 是封装的提示框方法 this.$common.errorToShow('请输入关键词搜索'); return; } // this.$db.get 是封装的获取异步缓存方法 if (this.$db.get(‘key’)) { this.keyMap = this.$db.get('key'); } // thi
uniapp-历史搜索记录
Anorry的博客
09-11 1065
大概就是用户搜索了某个关键字 然后搜索的关键字可以持久的保存下来。下次打开搜索的时候可以达到快速点击搜索的效果。很多搜索场景内都能用到这个功能。
uni-app搜索记录
一片涟漪
10-15 715
个人写法 仅供参考 HTML： <template> <view> <view class="sos_box"> <view class="sos_inp"><input type="text" placeholder="搜索" v-model="Nei" @confirm="ondang()" /></view> <view class="sos_qu">取消</view> </v
基于uni-app 实现微信小程序搜索历史功能
weixin_66511008的博客
10-13 425
Uni-app 是基于 Vue.js 的跨端框架，支持一次编写，多端发布，包括小程序、H5、App 等多个端。
uniapp云数据库历史记录
09-07
- *1* [uniapp通过本地缓存实现历史搜索记录](https://blog.csdn.net/qq_45018844/article/details/120845301)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
Uniapp追加历史记录
weixin_46426412的博客
04-09 622
【代码】Uniapp追加历史记录。
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
社交应用中，onPullDownRefresh下拉加载历史消息，与页面上的消息合并，滚动到下拉之前，页面不闪
本地存储搜索历史
xiaozhen0610的博客
07-29 202
在做搜索之类功能时遇到要把搜索历史存储起来，下次再进入时展示出来；网上找到一段代码，如下： functionsaveSearchinfo(key){ key=key.replace('搜索商品名称','');if(listHistoryArrayObj.indexOf(key)<0&&key!=''){listHistoryArrayObj.splice(0,0,key);l...
uniapp实现搜索历史功能
weixin_41623830的博客
06-28 1414
保存搜索历史
uniapp中实现搜索功能和历史记录
m0_50305015的博客
10-11 2406
html部分 <view class="inputBox"> <view class="input_box d-flex a-center"> <uni-icons type="search" size="20"></uni-icons> <input class="flex-1" type="text" v-model="kw" placeholder="请输入搜索内容" @input="input" /> &
uniapp简单实现搜索--历史记录功能
Quentin0823的博客
10-17 596
点击搜索时候，将搜索的值存入本地记录并展示，并且有清空历史记录功能。
【uniapp 样式】使用setStorageSync存储历史搜索记录
AAAXiaoApple的博客
08-02 982
【uniapp】使用setStorageSync存储历史搜索记录
Uniapp中实现搜索历史记录展示
随风飘的博客
10-27 371
实现需求，用户搜索时，记录用户搜索的历史记录，倒序排列，点击对应的搜索记录文字，也能耐进行搜索。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小莉爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值