Search history - to use the 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">&nbsp;</p>
        <div  v-for="(item,index) in searchHistoryList" :key="index" @click="searchByHistoryKeyWord(item)" class="history-keywords">
          &nbsp;&nbsp;{{item}}&nbsp;&nbsp;
        </div>
      </div>
    </ div>
    <! --- history search end ---->

2. vue 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 (this.searchHistoryList.length> 0) {
          this.showFlag = to true
        }
      },
      // clear history
      clearHistoryItems () {
        localStorage.removeItem ( 'historyItems')
        this.searchHistoryList = []
        the this = to false .showFlag
      },
      // null filter a result record is added, 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. added to the cache
         * /
        var to true appendFlag =
        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
          }
        })
      }

}