微信小程序历史数据

效果图演示
历史信息存储到开发者工具中的Storage
代码
wxml

<form  bindsubmit="formSubmit">

<view class="all">

  <view class="all_one">
      <input class="chaxun" placeholder="请输入车架号或OE号" name="ip" bindinput="onBlur" placeholder-style="color:#333333"></input>
      <button  class="button" form-type="submit"><image src="/image/cha.png" class="cha"></image></button>
  </view>
 
</view>
<view class="zhanwei"></view>
</form>
<view class='search_history' wx:if="{{isShow && hissearch}}">
        <view class='history_title'>最近搜索</view>
        <view class='history_item' wx:for="{{searchRecord}}" bindtap='chack' data-oe="{{hisItem}}" wx:key="{{index}}" wx:for-item="hisItem">
          <text >{{hisItem}}</text>
        </view>
        <view class='history_title clear' bindtap='clear_search'>清空搜索历史</view>
</view>
<view class='guanlian_data' wx:if="{{!isShow}}">
        <view  class='guanlian_item' bindtap='chack' data-oe="{{item.codenospace}}" wx:for="{{guanliandata}}">  
          <rich-text class="guanlian_oe" >{{item.codenospace_[0]}}<span class='red'>{{key}}</span>{{item.codenospace_[1]}}</rich-text> 
          <text class="guanlian_name">{{item.cspName}}</text>
        </view>
</view>

js

 data: {
    isShow: false,
    searchRecord: [],
    hissearch:true

  },
 formSubmit: 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
            })
 }
 // 清空搜索历史
  clear_search: function () {
    let that = this;
    wx.clearStorageSync('searhRecord')
    that.setData({
      searchRecord: [],
      isShow: false
    })

  },
  //将储存的历史信息拿出来
   that.setData({
             searchRecord: wx.getStorageSync('searchRecord'), //若无储存则为空
              hissearch: true
           })

wxss

.all{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100rpx;
  background-color: #3F464C;
  position: fixed;
  z-index: 9999;
}
.zhanwei{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100rpx;
  background-color: #3F464C;
 
}
.all_one{
  width: 90%;
  height: 70rpx;
  background-color: #FFFFFF;
  position: absolute;
  top: 5rpx;
}
.chaxun{
  width: 70%;
  height: 70rpx;
  position: absolute;
  left: 78rpx;
  font-size: 28rpx;
   border: 0rpx;
}
 .cha{
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  left: 26rpx;
  top: 22rpx;
 
} 
.button{
  width: 75rpx;
  height: 70rpx;
  position: absolute;
  background-color:  #FFFFFF;
  border-right: 0rpx;
  border-right-color:  #FFFFFF;
}
/*搜索历史列表外部容器样式*/
   .ddclass { 
 position: absolute; 
 width: 100%; 
 margin-top: 10px; 
 left: 0; 

} 


/*搜索历史普通样式*/

 .liclass { 
 font-size: .65rem; 
 line-height: 34px; 
 color: #575757; 
 height: 34px; 
 display: block; 
 padding-left: 18px; 
 background-color: #fff; 
 border-bottom: 1px solid #dbdbdb; 
} 
.search_history {
  height: auto;
  width: 95%;
  position: relative;
  background-color: #fff;
  border-radius: 5rpx;
  font-size: 30rpx;
  color: #000;
  text-align: left;
  left: 20rpx;
}
.guanlian_data{
  height: auto;
  width: 100%;
  position: relative;
  background-color: #fff;
  
}
.guanlian_oe{
  width: 100%;
  font-size: .65rem;
  float: left;
  padding-left: 2.5%;
  padding-top: 10rpx;
}
.guanlian_name{
  width: 100%;
  font-size: .65rem;
  float: left;
  padding-left: 2.5%;
}
.guanlian_item{
  width: 100%;
  border-top: 2rpx solid #3F464C;
  height: 70rpx;
  
}
.history_title {
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  color: #999;
  text-align: left;
  padding: 10rpx;
}

.history_item {
  position: relative;
  width: 60%;
  display: inline-block;
  padding: 10rpx 15rpx;
 
  margin: 10rpx;
  border-radius: 10rpx;
}

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

.red{
  color: blue
}