微信小程序入门六本地缓存和搜索

上一章介绍了上拉加载下拉刷新的功能 这章谈谈搜索和本地缓存。主要功能有，点击搜索显示搜索输入框同时显示搜索历史记录，点击右侧搜索按钮搜索数据同时保存到搜索历史记录中，清除历史记录等功能。

效果图：

先介绍搜索的功能：

第一步，做一个搜索的输入框，可以利用weui-wxss框架中searchbar。没有weui-wxss 可以在 https://github.com/weui/weui-wxss 找到目录 dist - example - searchbar 目录下找到。我将原本的"取消"换成了"搜索"的触发按钮。并修改 bindtap="searchData"  

                    
                        
                            
                            
                            
                                
                            
                        
                        
                    
                    
                
                
                    
                        {{searchLog}} 
                    
                    清除搜索记录
                

js： 

Page({
  data:{
    msgList:[], // 存储文章列表信息
    searchLogList:[], // 存储搜索历史记录信息
    hidden:true, // 加载提示框是否显示
    scrollTop : 0, // 居顶部高度
    inputShowed: false, // 搜索输入框是否显示
    inputVal: "", // 搜索的内容
    searchLogShowed: false // 是否显示搜索历史记录
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData( {
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    });
    // 如果缓存中有值，先从缓存中读取
    var info = wx.getStorageSync(msgListKey);
    if (info) {
      that.setData({
        msgList:info
      });
    } else {
      loadMsgData(that);
    }
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },

  // 显示搜索输入框和搜索历史记录
  showInput: function () {
    var that = this;
    if ("" != wx.getStorageSync('searchLog')) {
      that.setData({
          inputShowed: true,
          searchLogShowed: true,
          searchLogList : wx.getStorageSync('searchLog')
      });
    } else {
      that.setData({
          inputShowed: true,
          searchLogShowed: true
      });
    }
  },

  // 显示搜索历史记录
  searchLogShowed: function(){
    var that = this;
    if ("" != wx.getStorageSync('searchLog')) {
      that.setData({
          searchLogShowed: true,
          searchLogList : wx.getStorageSync('searchLog')
      });
    } else {
      that.setData({
          searchLogShowed: true
      });
    }
  },

  // 点击 搜索 按钮后 隐藏搜索记录，并加载数据
  searchData: function () {
    var that = this;
    that.setData({
        msgList : [],
        scrollTop : 0,
        searchLogShowed: false
    });
    pageNum = 1;
    loadMsgData(that);
    // 搜索后将搜索记录缓存到本地
    if ("" != searchTitle) {
      var searchLogData = that.data.searchLogList;
      searchLogData.push(searchTitle);
      wx.setStorageSync('searchLog', searchLogData);
    }
  },

  // 点击叉叉icon 清除输入内容，同时清空关键字，并加载数据
  clearInput: function () {
    var that = this;
    that.setData({
        msgList : [],
        scrollTop : 0,
        inputVal: ""
    });
    searchTitle = "";
    pageNum = 1;
    loadMsgData(that);
  },

  // 输入内容时 把当前内容赋值给 查询的关键字，并显示搜索记录
  inputTyping: function (e) {
    var that = this;
    // 如果不做这个if判断，会导致 searchLogList 的数据类型由 list 变为 字符串
    if ("" != wx.getStorageSync('searchLog')) {
      that.setData({
          inputVal: e.detail.value,
          searchLogList : wx.getStorageSync('searchLog')
      });
    } else {
      that.setData({
          inputVal: e.detail.value,
          searchLogShowed: true
      });
    }
    searchTitle = e.detail.value;
  },

  // 通过搜索记录查询数据
  searchDataByLog: function(e){
    // 从view中获取值，在view标签中定义data-name(name自定义，比如view中是data-log="123" ; 那么e.target.dataset.log=123)
    searchTitle = e.target.dataset.log;
    var that = this;
    that.setData({
        msgList : [],
        scrollTop : 0,
        searchLogShowed: false
    });
    pageNum = 1;
    loadMsgData(that);
  },
  // 清楚搜索记录
  clearSearchLog:function(){
    var that = this;
    that.setData({
      hidden:false
    });
    wx.removeStorageSync("searchLog");
    that.setData({
        scrollTop : 0,
        searchLogShowed: false,
        hidden:true
    });
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

完整代码（如果对其他有疑问，可以看前面几章内容，代码中有很详细的注释）：

list.wxml : 

    
        
            
                
                    
                        
                            
                            
                            
                                
                            
                        
                        
                    
                    
                
                
                    
                        {{searchLog}} 
                    
                    清除搜索记录