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

将数据存在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')
 },

  
    
    
  
  取消


  热门搜索
  
    
      {{item}}
    
  

  
    
      搜索历史
      清空历史
    
  
    
      
        {{item}}
      
    
  

.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))
  }
})

https://gitee.com/susuhhhhhh/wxmini_demo