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

作者 : 刺猬源码 本文共1818个字,预计阅读时间需要5分钟 发布时间: 2020-04-17 共790人阅读

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

输入框和搜索按钮表单的wxml,没啥特别的,这里绑定了输入框的输入值,样式我就不放上来了
    <form class=’searchForm’ bindsubmit=’searchSubmitFn’>      <input value=”{{searchValue}}” class=’topInput’ name=’input’/>      <button formType=’submit’ class=’searchBtn’>搜索</button>    </form>
 历史记录列表的wxml,也没啥特别的,就用了个列表循环,做了个判断,当没有搜索记录时显示没有搜索记录的条目
 <view class=’historyContent’>    <view class=’title’>      <h>历史搜索</h>      <image src=’../../images/u729.png’ class=’deleteIcon’ bindtap=’historyDelFn’ ></image>    </view>    <view class=’htrItemContent’>      <block wx:for=”{{searchRecord}}” wx:key='{{item}}’>        <view class=’htrItem’>{{item.value}}</view>      </block>       <view class=’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) {    var that = this    var inputVal = e.detail.value.input    var searchRecord = this.data.searchRecord    if (inputVal == ”) {      //输入为空时的处理    }    else {      //将搜索值放入历史记录中,只能放前五条      if (searchRecord.length < 5) {        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: []    })  },

刺猬源码 » 微信小程序实现历史搜索记录的本地储存和删除

刺猬QQ交流群号多少?
363432
刺猬官方有技术支持吗?
有的,但技术支持是有偿服务哦,咨询右下角的在线客服吧!
下载的资源不能使用怎么办?
如果在本站下载的资源不能使用,一经确认可以联系在线客服退款。

发表评论

刺猬源码网,累计帮助1000+用户成功建站,为草根创业提供助力!

立即查看 了解详情