微信小程序实现历史搜索功能的全过程(h5同理)

时间:2022-12-14 苏苏哇哈哈人气:0

1.实现效果

2.实现原理

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

wx.setStorageSync:

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。存储的内容,只支持原生类型、Date、及能够通过JSON.stringify序列化的对象

注意：wx.setStorage是异步的，wx.setStorageSync是同步的，即要等待执行完才会去执行其他的代码

将已搜索的数据存在本地缓存中。

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);

点击'清空历史'按钮,wx.removeStorage清空存在本地缓存中的历史记录列表。

wx.removeStorageSync：

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

3.实现步骤

定义热门搜索列表，搜索历史列表，搜索名称

hot_list:['杜甫','李白','李清照','姜子牙','万事如意，心想事成'],//热门搜索
list:[],//搜索历史列表
search： "",//当前搜索内容

在onShow事件中，判断本地缓存是否存在key为search_history的数据，如果有就选取前15条数据

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

为搜索框添加bindconfirm事件,如果搜索的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前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))
  },

点击热门搜索中的数据，添加事件，如果选中的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前15个存进本地缓存中

  handleIHotItem(e) {
    let { index } = e.currentTarget.dataset, { hot_list } = this.data;
    let search = hot_list[index]
    this.setData({
      search,
    })
    // 将标签存到历史搜索中
    this.handleData(search)
  },

点击搜索历史列表中的数据，添加事件，如果选中的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前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.实现代码

<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: "",//当前搜索内容
  },
  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')
  },
})

总结

加载全部内容