页面缓存的操作（搜索历史记录），页面搜索功能实现

搜索与显示历史记录功能的实现

需求

完成一次搜索记录一次搜索，以后进入搜索页面会显示搜索历史，点击删除小图标会清空所有缓存

分割功能需求

主要分割为这几个步骤：

1. 进入搜索后判断缓存中是否有值，如果没有缓存，隐藏历史记录跟小图标，如果有缓存，加载缓存，将缓存的内容加载进预先制作的显示容器中，并且在上方显示历史记录跟小图标；
2. 输入值后，点击完成，判断是否有搜索结果，如果有，保存搜索记录，放进缓存，并且显示搜索结果，此时需要隐藏历史记录的container,隐藏完成按钮，上方的搜索框的长度变长，显示结果的container,并且input框中的值为不变，保存在input框中，没有就返回空
3. 删除缓存

---

第一步

实现：

onLoad: function (options) {
    const inputValue = options.inputValue;
    if (wx.getStorageSync('searchData') == '') {
      this.setData({
        isHide: true,
        isCover: true,
      })
    } else {
      this.setData({
        inputValue: inputValue,
        confirm: '完成',
        sercherStorage: wx.getStorageSync('searchData') || [],
        isHide: false,
        isShow: true
      })
    }  
  },

效果：

---

第二步

实现：

changeValue(e) {
    let inputValue = e.detail.value;
    if (inputValue == '') {
      this.setData({
        confirm: '取消',
        isConfirm: false,
        isHide:false, //显示历史记录container
        width: '85%',
        isShow: true,  //显示图标以及标签栏  
        isCover:true //隐藏搜索结果的container
      })
    } else {
      this.setData({
        confirm: '完成',
        inputValue: inputValue
      })
    }
  },//监听输入

  confirmValue(e) {
    let value = this.data.inputValue;//获取输入值
    if (this.data.confirm === '完成') {
      let result = [];
      for (let i in jobList) {
        if (jobList[i].jobName.indexOf(value) >= 0){
          result.push(jobList[i]);
          this.setData({
            result
          })
        }
        if(this.data.result.length == 0) {      
          wx.showToast({
            title: '未找到数据',
          });
          this.setData({
            isConfirm: false,
            isHide: false
          })
        }
      }//搜索数据匹配
         
      // 第二种搜索方法 正则匹配
      // let result=[];
      // let reg=new RegExp(value);
      // for(var i=0;i

效果：

---

第三步

  clearStorage(e) {
    wx.clearStorageSync('searchData');//清除缓存
    wx.showModal({
      title: '提示',
      content: '确定删除全部历史记录？',
      success: (res) => {
        if (res.confirm) {
          this.setData({
            sercherStorage: [],
            isShow: false
          })
        } else if (res.cancel) {
          return false;
        }
      }
    })
  },

完整代码

wxml:

    
        
        
    
    {{confirm}}
    
        
            历史搜索
            
        
        
            
                {{item.name}}