快捷導航

微信小程序?qū)崿F(xiàn)歷史搜索功能的全過程(h5同理)

更新時間：2022年12月14日 11:11:44 作者：蘇蘇哇哈哈

最近在使用微信小程序開發(fā)的時候遇到了一個需求,需要實現(xiàn)歷史搜索記錄的功能,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)歷史搜索功能(h5同理)的相關(guān)資料,需要的朋友可以參考下

1.實現(xiàn)效果

2.實現(xiàn)原理

微信小程序中將數(shù)據(jù)存在storage中，除非用戶手動觸發(fā)，否則不會過期，同理，若想在瀏覽器中實現(xiàn)，只需將數(shù)據(jù)存在localStorage中即可。

wx.setStorageSync:

將數(shù)據(jù)存儲在本地緩存中指定的 key 中。會覆蓋掉原來該 key 對應(yīng)的內(nèi)容。除非用戶主動刪除或因存儲空間原因被系統(tǒng)清理，否則數(shù)據(jù)都一直可用。單個 key 允許存儲的最大數(shù)據(jù)長度為 1MB，所有數(shù)據(jù)存儲上限為 10MB。存儲的內(nèi)容,只支持原生類型、Date、及能夠通過JSON.stringify序列化的對象

注意：wx.setStorage是異步的，wx.setStorageSync是同步的，即要等待執(zhí)行完才會去執(zhí)行其他的代碼

將已搜索的數(shù)據(jù)存在本地緩存中。

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

選擇存在本地緩存中的前15條數(shù)據(jù)顯示在頁面中。

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

每次選擇歷史數(shù)據(jù)的時候，將選擇的數(shù)據(jù)移到數(shù)組的第一條。

 this.data.list.unshift(data);

點擊'清空歷史'按鈕,wx.removeStorage清空存在本地緩存中的歷史記錄列表。

wx.removeStorageSync：

從本地緩存中移除指定 key，是wx.removeStorage 的同步版本。

3.實現(xiàn)步驟

定義熱門搜索列表，搜索歷史列表，搜索名稱

hot_list:['杜甫','李白','李清照','姜子牙','萬事如意，心想事成'],//熱門搜索
list:[],//搜索歷史列表
search： "",//當前搜索內(nèi)容

在onShow事件中，判斷本地緩存是否存在key為search_history的數(shù)據(jù)，如果有就選取前15條數(shù)據(jù)

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

為搜索框添加bindconfirm事件,如果搜索的數(shù)據(jù)已存于歷史列表中，先刪除，然后unshift進數(shù)組的頭部，并截取前15個存進本地緩存中

 handleInput(e) {
    let data = e.detail.value.replace(/(^\s*)|(\s*$)/g, "");//去掉前后的空格
    if (data.trim() != '') {
      this.handleData(data)
    }
  },

處理存入數(shù)據(jù)

  handleData(e) {
    this.data.list.forEach((item, index) => {
      if (item == e) {
        this.data.list.splice(index, 1);
      }
    })
    this.data.list.unshift(e);
    this.setData({
      list: this.data.list.slice(0, 15)
    })
    wx.setStorageSync('search_history', JSON.stringify(this.data.list))
  },

點擊熱門搜索中的數(shù)據(jù)，添加事件，如果選中的數(shù)據(jù)已存于歷史列表中，先刪除，然后unshift進數(shù)組的頭部，并截取前15個存進本地緩存中

  handleIHotItem(e) {
    let { index } = e.currentTarget.dataset, { hot_list } = this.data;
    let search = hot_list[index]
    this.setData({
      search,
    })
    // 將標簽存到歷史搜索中
    this.handleData(search)
  },

點擊搜索歷史列表中的數(shù)據(jù)，添加事件，如果選中的數(shù)據(jù)已存于歷史列表中，先刪除，然后unshift進數(shù)組的頭部，并截取前15個存進本地緩存中

  handleIHisItem(e) {
    let { index } = e.currentTarget.dataset, { list } = this.data;
    let search = list[index]
    this.setData({
      search: search
    })
    this.handleData(search)
  },

點擊'清空歷史'按鈕，添加清空事件

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

4.實現(xiàn)代碼

<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="handleInput" 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="handleIHotItem">{{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="handleIHisItem">{{item}}</view>
      </block>
    </view>
  </view>
</view>

Page({
  data: {
    hot_list: ['杜甫', '李白', '李清照', '姜子牙', '萬事如意，心想事成'],
    list: [],
    search: "",//當前搜索內(nèi)容
  },
  onShow: function () {
    if (wx.getStorageSync('search_history')) {
      this.setData({
        list: JSON.parse(wx.getStorageSync('search_history')).slice(0, 15)
      })
    }
  },
  handleInput(e) {
    let data = e.detail.value.replace(/(^\s*)|(\s*$)/g, "");//去掉前后的空格
    if (data.trim() != '') {
      this.handleData(data)
    }
  },
  handleData(e) {
    this.data.list.forEach((item, index) => {
      if (item == e) {
        this.data.list.splice(index, 1);
      }
    })
    this.data.list.unshift(e);
    this.setData({
      list: this.data.list.slice(0, 15)
    })
    wx.setStorageSync('search_history', JSON.stringify(this.data.list))
  },
  handleIHotItem(e) {
    let { index } = e.currentTarget.dataset, { hot_list } = this.data;
    let search = hot_list[index]
    this.setData({
      search,
    })
    // 將標簽存到歷史搜索中
    this.handleData(search)
  },
  handleIHisItem(e) {
    let { index } = e.currentTarget.dataset, { list } = this.data;
    let search = list[index]
    this.setData({
      search: search
    })
    this.handleData(search)
  },
  // 清空輸入文字
  clear_input() {
    this.setData({
      search: ''
    })
  },
  //清空歷史
  clearHistory() {
    this.setData({
      list: []
    })
    wx.removeStorageSync('search_history')
  },
})