微信小程序历史搜索历史的本地缓存和删除

最新推荐文章于 2024-08-22 18:24:35 发布

望月归乡

最新推荐文章于 2024-08-22 18:24:35 发布

阅读量3k

点赞数 3

文章标签：微信小程序

本文链接：https://blog.csdn.net/sinat_32546159/article/details/94205945

版权

wxml：

<view class='search_history' wx:if="{{isShow}}">
        <view class='history_title'>最近搜索</view>
        <view class='history_item' wx:for="{{searchRecord}}" wx:key="{{index}}" wx:for-item="hisItem">
          <text bindtap='search_his' data-his="{{hisItem}}">{{hisItem}}</text>
        </view>
        <view class='history_title clear' bindtap='clear_search'>清空搜索历史</view>
</view>

wxss:

.search_history {
  height: auto;
  width: 95%;
  position: relative;
  background-color: #fff;
  border-radius: 5rpx;
  font-size: 30rpx;
  color: #000;
  text-align: left;
}

.history_title {
  color: #999;
  text-align: left;
  padding: 10rpx;
}

.history_item {
  display: inline-block;
  padding: 10rpx 15rpx;
  background-color: rgb(248, 246, 246);
  margin: 10rpx;
  border-radius: 10rpx;
}

.clear {
  display: inline-block;
  padding: 10rpx 15rpx;
  background-color: #66d7fa;
  color: #fff;
  margin: 10rpx;
  border-radius: 10rpx;
}

js:

//js用到的全局变量
Page({
  data: {
    isShow: false,
    searchRecord: [],
  },
//搜索的时候缓存到本地

  searchBox: function(e) {
    let that = this;
    let inputVal = e.detail.value.ip;
    let searchRecord = this.data.searchRecord;
    if (inputVal == "") {
      that.setData({
        ip: inputVal
      })
      return
    } else {
      if (searchRecord.length < 10) {
        searchRecord.unshift(inputVal);
      } else {
        searchRecord.pop();
        searchRecord.unshift(inputVal);
      }
      //将历史记录数组整体储存到缓存中
      wx.setStorageSync('searchRecord', Array.from(new Set(searchRecord)));
    }
    that.setData({
      ip: e.detail.value.ip
    })
  },
  // 缓存历史
  openHistorySearch: function() {
    let that = this;
    that.setData({
      searchRecord: wx.getStorageSync('searchRecord') || [], //若无储存则为空
    })
    console.log(that.data.searchRecord);
  },
  // 清空搜索历史
  clear_search: function() {
    let that = this;
    wx.clearStorageSync('searhRecord')
    that.setData({
      searchRecord: [],
      isShow: false
    })

  },
  // 点击历史搜索
  search_his: function(e) {
    let that = this;
    let his = e.currentTarget.dataset.his;
    that.setData({
      ip: his,
      isShow: false
    });
    that.search_host();
  },

})