vue search history cache implementation

Ideas:

1. The browser cache permanently save your search history data.

2. Save the page initialization data to the page variable.

3. search history and delete plus how to synchronize the cache.

---------------- ---------------- direct look at the code

* Use the distal vue, here is a fragment of code *

div 1. page

<!---历史搜索begin---->
    <div style="margin-top: 46px">
      <div v-if="this.showFlag === true" class="search-history">
        <div class="tip-words">
          <div style="float: left;">
            <h4>搜索历史</h4>
          </div>
          <div style="float: right;" @click="clearHistoryItems">
            <img src="../../img/img/delete-1.png" width="16px"/>
          </div>
        </div>
        <p style="margin-bottom: 10px"> </p>
        <div  v-for="(item,index) in searchHistoryList" :key="index" @click="searchByHistoryKeyWord(item)" class="history-keywords">
            {{item}}  
        </div>
      </div>
    - history search end--<-!>Div</
    -->

 

2. View data

Data () {
       return {
         // search history 
        searchHistoryList: [],
         // mark the search history 
        showFlag: to false , 
        loadShow: to false 
      } 
    },

 

Some methods 3.vue search history

Methods: { 
      showHistory () { 
        IF ( the this .searchHistoryList.length> 0 ) {
           the this .showFlag = to true 
        } 
      }, 
      // clear history 
      clearHistoryItems () { 
        localStorage.removeItem ( 'historyItems' )
         the this .searchHistoryList = []
         the this = .showFlag to false 
      }, 
      // filter blank record is added a result, filtered air search 
      appendKeywords (value) {
         / * * 
         * 1. some keywords have not added 
         * 2. Add to the top of the array, if exceeding 10 the last one is deleted 
         * 3. Add to cache
         */
        var appendFlag = true
        if (this.searchHistoryList !== null && this.searchHistoryList !== undefined && this.searchHistoryList.length > 0) {
          this.searchHistoryList.forEach(function(currentValue, index) {
            if (currentValue === value) {
              appendFlag = false
              return
            }
          })
          // 判断-添加
          if (appendFlag === true) {
            // 长度判断
            if (this.searchHistoryList.length >= 10) {
              this.searchHistoryList.unshift(value)
              this.searchHistoryList.pop()
            } else {
              this.searchHistoryList.unshift(value)
            }
            localStorage.setItem('historyItems', JSON.stringify(this.searchHistoryList))
          }
        } else {
          this.searchHistoryList = []
          this.searchHistoryList.push(value)
          localStorage.setItem('historyItems', JSON.stringify(this.searchHistoryList))
        }
      },
      searchByHistoryKeyWord(item) {
        this.loadTip = ''
        this.queryData.inputInfo = item
        // 查询
        fetchGetDataByKeyWord(item).then(response => {
          // 查询赋值
          this.dataList = response.data.body.data
          if (this.dataList.length === 0) {
            this.loadTip = '没有符合条件数据'
            this.showHistory()
          } else {
            this.loadTip = ''
            this.showFlag = false
          }
        })
      }

}