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

输入框和搜索按钮表单的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: []
    })
  },

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

猜你喜欢