微信小程序实现历史搜索功能（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))
  }
})