基于uniapp缓存写的搜索历史记录，清空历史记录，点击历史记录直接搜索

先看页面效果

简介

输入值回车搜索，会把搜索值加入缓存中。
点击历史记录可直接搜索，点击“暂未搜索记录”
没有效果哦
清空记录就是清空缓存
使用的技术

1. uni.getStorage({}),uni.setStorage({})2. unshift() //在数组第一位添加值3. pop() // 去掉数组最后一个值

代码

主要就是自己的页面，直接复制方法就可以，注释很清晰，一看就懂

//   data中的值：data () {return {// 搜索值search_val:"",// 缓存的历史记录yaopinList:[]}},// 页面加载onLoad: function(){//调用getSearchHistroy方法this.getSearchHistroy();},// 方法methods:{//  获取历史缓存并赋值的方法，直接复制getSearchHistroy(){// 获取就缓存let self = this;//获取缓存： key为search_histroyuni.getStorage({key: 'search_histroy',success: function (res) {//如果获取历史的数组长度为0，就往里边加个“暂未搜             索历史”if(res.data.length == 0){console.log("暂未搜索历史");self.yaopinList = []self.yaopinList.unshift("暂未搜索历史")}else{//如果获取历史的数组 有值，那就赋值self.yaopinList = res.data}},fail:function(res){//如果获取历史失败，就往里边加个“暂未搜索历史”console.log("暂未搜索历史");self.yaopinList = []self.yaopinList.unshift("暂未搜索历史")}});//  清空历史记录方法，直接复制cleanHistory(){let self = this;uni.removeStorage({key: 'search_histroy',success: function (res) {self.getSearchHistroy();}});},// 点击单个历史记录时搜索，直接复制//hisname 是点击历史记录时传入的单个记录searchByHis(hisname){//当点击的是"暂未搜索历史"的时候，返回if(hisname == "暂未搜索历史"){return}this.search_val = hisname;this.searchByVal();},// 点击搜索的方法searchByVal(){//可以直接复制，把下边的跳转地址改成自己的就可以let data = [];let self = this;for (var i = 0; i < self.yaopinList.length; i++) {if(self.yaopinList[i] == "暂未搜索历史"){continue;}data.unshift(self.yaopinList[i])}// 搜索放入数组data.unshift(this.search_val);// 这个5是显示历史记录的个数，可以自行修改// 数值越大，显示的历史记录就越多，// 不限个数的话就可以把这个判断删了if(data.length > 5){data.pop();}// 设置新缓存uni.setStorage({key: 'search_histroy',data: data,success: function () {uni.navigateTo({url: "你要跳转的地址，带着你的搜索值，也可以直接搜索"})}});}},}

基于uniapp缓存写的搜索历史记录，清空历史记录，点击历史记录直接搜索相关推荐

提高搜索查询时的点击率/提高搜索流量的质量和数量
Google webmaster tools 中可以查看查看"热门搜索查询"中网站内容被展示的次数以及被点击的次数(搜索点击率),点开一个热门查询词可以看到网站对应的页面链接以及在 ...
Android搜索框输入内容点击键盘的搜索按钮进行搜索
今天测试提出这个问题,就是输入搜索信息点后点击键盘上面的搜索按钮不能进行搜索,因为了解过自定义键盘,所以我第一想到的就是自定义一个键盘,不过怎么想也是有点麻烦,后来问了一下同事,说是可以直接监听现有的 ...
ajax搜索思路,jquery创建一个ajax关键词数据搜索实现思路
在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jq ...
Vue用localStorage保存搜索历史记录/清空记录
Vue搜索历史记录/清空记录 1.搜索后保存历史记录, localStorage.setItem(key,value) 2.在保存前,先判断数组中是否已存在记录(有:则清除该记录),并将搜索值unsh ...
基于uni-app开发微信小程序__手牵手带你开发【懂你找图】项目
前戏某一天的夜里,敲完了代码之后便直接倒在床上睡着了,醒来时只记得梦里的一句话:"想要成为高手,就必须要大量实践,大量做项目,必须要把自己不会的东西全部吃透,不要得过且过.",猛 ...
uniapp 移动端上传文件_基于 uniapp 实现动态路由和动态 Tabbar
本文转载自字节逆旅公众号,感谢作者的好文分享✌️,点击阅读原文可以查看作者的掘金链接. uniapp用来开发app还是比较方便快捷的,官网教程[1]挺细致,几乎所有问题都能找到答案.网上也有不少入 ...
基于 uni-app 和 uni-cloud 小程序项目开发实战
基于 uni-app 和 uni-cloud 小程序项目开发实战前言一.技术栈二.环境搭建三.项目功能介绍 1.地图地点搜索及路线规划 2.uniCloud服务空间 3.AI识图 4.上拉框组 ...
[Android]文本框实现搜索和清空效果
前言本文实现的效果:文本框输入为空时显示输入的图标:不为空时显示清空的图标,此时点击清空图标能清空文本框内输入文字. 声明欢迎转载,但请保留文章原始出处:) 农民伯伯:http://over140 ...
[js] 微信小程序实现轨迹回放，微信原生小程序，基于uniapp的小程序？
[js] 微信小程序实现轨迹回放,微信原生小程序,基于uniapp的小程序? 需要写出轨迹拖动,进度条,开始,暂停,结束功能. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...

基于uniapp缓存写的搜索历史记录，清空历史记录，点击历史记录直接搜索

先看页面效果

简介

代码

基于uniapp缓存写的搜索历史记录，清空历史记录，点击历史记录直接搜索相关推荐

最新文章

热门文章