vue搜索歷史記錄緩存實現

思路:

1.瀏覽器緩存永久保存搜索歷史數據.

2.頁面初始化將數據保存到頁面變量中.

3.對搜索歷史記錄的怎加和刪除,要同步到緩存中.

----------------直接看代碼----------------

*前端使用的是vue,這里只是代碼片段*

1.頁面的 div

<!---歷史搜索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>
    <!---歷史搜索end---->

 

2. vue data

data() {
      return {
        // 搜索歷史
        searchHistoryList: [],
        // 標記顯示搜索歷史
        showFlag: false,
        loadShow: false
      }
    },

 

3.vue 搜索歷史的一些方法

methods: {
      showHistory() {
        if (this.searchHistoryList.length > 0) {
          this.showFlag = true
        }
      },
      // 清空歷史記錄
      clearHistoryItems() {
        localStorage.removeItem('historyItems')
        this.searchHistoryList = []
        this.showFlag = false
      },
      // 過濾一個結果的空記錄添加，過濾空搜索
      appendKeywords(value) {
        /**
         * 1.已經有的關鍵詞不再添加
         * 2.添加到數組的首位，若超出10個則刪除最后一個
         * 3.添加到緩存
         */
        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
          }
        })
      }

}