微信历史,微信小程序实现历史搜索记录的本地储存和删除-即速应用

微信历史,微信小程序实现历史搜索记录的本地储存和删除

浏览量：1047 时间：2019-12-09 来源：rosie肉肉

输入框和搜索按钮表单的wxml，没啥特别的，这里绑定了输入框的输入值，样式我就不放上来了
formclass='searchForm'bindsubmit='searchSubmitFn'inputvalue="{{searchValue}}"class='topInput'name='input'/buttonformType='submit'class='searchBtn'搜索/button/form历史记录列表的wxml，也没啥特别的，就用了个列表循环，做了个判断，当没有搜索记录时显示没有搜索记录的条目
viewclass='historyContent'viewclass='title'h历史搜索/himagesrc='../../images/u729.png'class='deleteIcon'bindtap='historyDelFn'/image/viewviewclass='htrItemContent'blockwx:for="{{searchRecord}}"wx:key='{{item}}'viewclass='htrItem'{{item.value}}/view/blockviewclass='noHistoryItem'wx:if="{{searchRecord.length==0}}"你还没有搜索记录/view/view/view首先设置一下初始值，写一个取得本地储存的历史搜索记录列表函数，在页面onload时候启用
data:{inputVal：'',searchRecord:[]},openHistorySearch:function(){this.setData({searchRecord:wx.getStorageSync('searchRecord')||[],//若无储存则为空})},页面onLoad函数里加载一下函数就ok了具体的历史记录获取储存请看下面
onLoad:function(options){this.openHistorySearch()},提交表单时的函数，这里是动态改变json数组的某个健值的话在小程序里应用整体赋值的方法，强迫症，输入为空时不把他放到历史纪录里，可以做一些其它跳转处理，这里我只显示最新的五条，不为空且小于五时，直接放到数组里面，注意我用的是unshift而不是push，因为我想让最新输入的在最上面，若已经等于五条则用pop删掉最老的一条，再放入新的记录，再存入本地储存
//点击搜索按钮提交表单跳转并储存历史记录searchSubmitFn:function(e){varthat=thisvarinputVal=e.detail.value.inputvarsearchRecord=this.data.searchRecordif(inputVal==''){//输入为空时的处理}else{//将搜索值放入历史记录中,只能放前五条if(searchRecord.length5){searchRecord.unshift({value:inputVal,id:searchRecord.length})}else{searchRecord.pop()//删掉旧的时间最早的第一条searchRecord.unshift({value:inputVal,id:searchRecord.length})}//将历史记录数组整体储存到缓存中wx.setStorageSync('searchRecord',searchRecord)}},点击垃圾桶删除历史纪录和本地储存
historyDelFn:function(){wx.clearStorageSync('searhRecord')this.setData({searchRecord:[]})},

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。