【微信小程序】历史搜索记录本地保存功能实现及思路

要求：

1.用户点击搜索之后把输入的值记录下来
2.如果最新搜索在历史记录里面有，把它从原来的位置放到第一的位置显示
3.最大10条
实现思路：
首先是在用户点击‘搜索’的时候开始往Storage里面存数据的，然后再存数据的同时做一些处理。
处理：先判断存进来的值在Storage里面有么有，有的话删除。然后在数组首部添加元素，最后在从0截取到第10位。
好了直接上代码

 let estates = wx.getStorageSync('searchHistory') || [] //获取本地存储没值的时候给个初始值const index = estates.findIndex(item => item ===value)//查看vaule在Storage里有没有if (index >= 0) estates.splice(index, 1) // 判断如果有就删掉estates.unshift(value) // 在数组首添加元素wx.setStorageSync('searchHistory', estates.slice(0, 10)) // 存到Storage里面 然后选取数组的前10位

这就是存到Storage里面的方法，展示到页面上只需获取本地存储循环即可

【微信小程序】历史搜索记录本地保存功能实现及思路相关推荐

微信小程序--历史搜索功能的实现
最近公司在做一个内部的管理系统,是基于微信小程序的,我看了一下和Vue比较类似,布局方面有HTML和CSS基础的人都可以做,还是比较容易上手的,现在先记录一下搜索框保留搜索历史的功能的实现. ##wx ...
微信小程序历史搜索历史的本地缓存和删除
wxml: <view class='search_history' wx:if="{{isShow}}"><view class='history_title' ...
【微信小程序】将base64图片保存至本地
需求描述微信小程序中,下载一个报告文件,直接可获取到的是报告图片的base64格式. 参考文章 1.微信小程序实现图片下载功能 2.微信小程序把base64的图片保存到手机相册代码实现 1.wxm ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序下载文件至本地，并打开文档
微信小程序下载文件至本地,并打开文档 downloadfile(e){var url = e.currentTarget.dataset.url;//下载文件,生成临时地址wx.downloadFil ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...

【微信小程序】历史搜索记录本地保存功能实现及思路

【微信小程序】历史搜索记录本地保存功能实现及思路相关推荐

最新文章

热门文章