uniapp 前端获取历史搜索记录

场景：搜索页，搜索栏下方的历史搜索

场景分析：每次搜索的关键词都要放到历史搜索里面，首页关键词是要定义的keyname，这个关键词可以放到cookie或者sessionStory里面，我用的uniapp，放到了本地缓存里面，实现方式：

• 获取搜索词
• 添加历史搜索
• 清除历史搜索

获取历史搜索，代码中去掉重复的搜索词

 getHistory(keyname) {
    let that = this
    let words = ''
    if(uni.getStorageSync(keyname)) { //判断缓存中存没存搜索词
      words =  JSON.parse(uni.getStorageSync(keyname))
    }
    if(!words){
      return []
    }
    for (let i = 0; i < words.length; i++) {
      if (words[i] == "" || typeof(words[i]) == "undefined" || words[i] == "") {
        words.splice(i,1)
        i= i-1
      }
    }
    return words
  },

添加历史搜索，先从getHistory中取搜索词words，然后看历史搜索词中是否包括关键词（就是自己输入的关键词），没有添加，有了删除，然后再将keyname重新放入storage中。

 addToHistory(keyname , keyword) {
    let that = this
    let words = that.getHistory(keyname)
    let has = words.includes(keyword)
    if (!has) {
      // 数组末尾 删除 ， keyword 数组第一位
      let length = words.length
      if (length >= maxLength){
        words.pop()
      }
      words.unshift(keyword)
      uni.setStorageSync(keyname,JSON.stringify(words))
    }
  },

清除关键词，从缓存中移除就可以

 clearHistory(keyname) {
    uni.removeStorageSync(keyname)
  }

页面中渲染：

• 首先import上面封装的js
• 然后再data中定义historySearch：‘’
• 然后再onshow中去调用
• 页面中直接v-for循环historySearch

  <view class="search-touch" v-if="historySearch.length">
            <view class="hot-search">
                <view class="hot-tit">历史搜索</view>
                <view class="hot-con clearfix">
                    <view class="item" v-for="(item, index) in historySearch" :key="index" @click="goSearch(item)">{{ item }}</view>
                </view>
            </view>
        </view>

  onShow() {
        //获取历史搜索
        this.historySearch = getHistory();
    },

总结：简单的几个方法就直接前端自己处理了历史搜索的问题。