微信小程序实现历史搜索功能（h5同理）

1.实现效果

2.实现原理

将数据存在storage中。

wx.setStorageSync('search_history', JSON.stringify(this.data.list))

取数组前15条。

 if (wx.getStorageSync('search_history') ){
     this.setData({
       list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15)
     })
   }

并将每次选择的数据移到数组的第一条。

 this.data.list.unshift(data);

清空所有历史。

clearHistory() {
   this.setData({
     list:[]
   })
   wx.removeStorageSync('search_history')
 },

3.微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在localStorage中即可。

4.代码

<view class="head flex-row">
  <view class="head_input">
    <image src="/img/search_icon.png" class="search_icon"></image>
    <input type="text" placeholder="搜索" placeholder-class="place_holder" bindconfirm="getData" value="{{search}}"></input>
  </view>
  <view class="sha_icon" catchtap="clear_input">取消</view>
</view>
<view class="con">
  <view class="title">热门搜索</view>
  <view class="flex-row list">
    <block wx:for="{{hot_list}}"  wx:key="index">
      <view class="c_item color"  data-index="{{index}}" catchtap="getSearch">{{item}}</view>
    </block>
  </view>

  <view  wx:if="{{list.length>0}}">
    <view class="flex-row j_b">
      <view class="title">搜索历史</view>
      <view catchtap="clearHistory" class="clear">清空历史</view>
    </view>

    <view class="flex-row list">
      <block wx:for="{{list}}" wx:key="index">
        <view class="c_item" data-index="{{index}}"  catchtap="getSearchOne">{{item}}</view>
      </block>
    </view>
  </view>
</view>

/* pages/jsCase/historySearch/index.wxss */
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  background: #fff;
}
.head_input {
  position: relative;
  flex: 1;
  margin-left: 12rpx;
}

.search_icon {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15rpx;
  width: 28rpx;
  height: 30rpx;
  padding-left: 23rpx;
}

.head input {
  height: 60rpx;
  padding-left: 75rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  background: #F5F5F5;
}

.place_holder {
  font-size: 28rpx;
  color: #999999;
}

.sha_icon{
  margin-left: 18rpx;
  font-size: 28rpx;
  color: #333333;
}

.con{
  padding: 130rpx 20rpx ;
}
.title{
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
}

.c_item{
  font-size: 25rpx;
  height: 49rpx;
  line-height: 49rpx;
  padding: 0 26rpx;
  background: rgba(131, 183, 253,0.1);
  border-radius: 31rpx;
  justify-content: center;
  margin-bottom: 24rpx;
  margin-right: 24rpx;
  white-space:pre;
  color: #999;
}
.list{
  margin-top: 40rpx;
  flex-wrap: wrap;
}

.color{
  color: #83B7FD;
}

.clear{
  color: #999;
  font-size: 25rpx;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    hot_list:['杜甫','李白','李清照','姜子牙','万事如意，心想事成'],
    list:[],
  },


  onShow: function () {
    if (wx.getStorageSync('search_history') ){
      this.setData({
        list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15)
      })
    }
  },
  getData(e){
    let data = e.detail.value.replace(/(^\s*)|(\s*$)/g, "");//去掉前后的空格
      if (data.trim() != '') {
        this.data.list.forEach((key, index) => {
          if (key == data) {
            this.data.list.splice(index, 1);
          }
        })
        this.data.list.unshift(data);
        this.setData({
          list:this.data.list.slice(0,15)
        })
        wx.setStorageSync('search_history', JSON.stringify(this.data.list))
      }
  },
  clear_input(){
    this.setData({
      search:''
    })
  },

  getSearch(e){
    let {index}=e.currentTarget.dataset,{hot_list}=this.data;
    let va=hot_list[index]
    this.setData({
      search:va
    })
    // 将标签存到历史搜索中
    this.data.list.forEach((item, index) => {
      if (item == va) {
        this.data.list.splice(index, 1);
      }
    })
    this.data.list.unshift(va);
    this.setData({
      list:this.data.list.slice(0,15)
    })
    wx.setStorageSync('search_history', JSON.stringify(this.data.list))
  },
   //清空历史
   clearHistory() {
    this.setData({
      list:[]
    })
    wx.removeStorageSync('search_history')
  },
  getSearchOne(e){
    let {index}=e.currentTarget.dataset,{list}=this.data;
    let va=list[index]
    this.setData({
      search:va
    })
    this.data.list.forEach((item, index) => {
      if (item == va) {
        this.data.list.splice(index, 1);
      }
    })
    this.data.list.unshift(va);
    this.setData({
      list:this.data.list.slice(0,15)
    })
    console.log(this.data.list)
    wx.setStorageSync('search_history', JSON.stringify(this.data.list))
  }
})

5.更多小程序案例（创作不易，尊重原创）

https://gitee.com/susuhhhhhh/wxmini_demo