使用cookie實現歷史搜索記錄功能

在學習網易雲音樂項目的時候，有一個歷史搜索記錄的功能，

就是你點擊的關鍵詞被記錄下來，然后顯示在搜索歷史記錄里；

 

 主要實現方法：

項目中使用的是 'good-storage' :  https://www.npmjs.com/package/good-storage

1、npm i good-storage

2、在組件中導入

import storage from 'good-storage';

3、我的搜索列表和搜索歷史列表的DOM結構

<!-- 熱門搜索 -->
        <div class="block">
          <p class="title">熱門搜索</p>
          <div class="tags">
            <el-button
              class="btn"
              size="mini"
              v-for="(item, i) in searchHots"
              :key="i"
              @click="onClickHot(item)"
            >{{item.first}}</el-button>
          </div>
</div>

<!-- 搜索歷史 -->
        <div class="block">
          <p class="title">搜索歷史</p>
          <div class="tags">
            <el-button
              class="btn"
              size="mini"
              v-for="(item, i) in searchHistorys"
              :key="i"
            >{{item.first}}</el-button>
          </div>
</div>

4、點擊熱門搜索的每個button按鈕的時候，獲取它的關鍵詞（比如我點擊“六一快樂”，就把“六一快樂”這個關鍵詞保留下來）

methods部分：

 onClickHot(item) {
      const { first } = item;
      this.goSearch(first);
},
goSearch(keyWords) {
      this.searchHistorys.push({ first: keyWords });
      storage.set(SEARCH_HISTORY_KEY, this.searchHistorys);
      this.$router.push(`/search/${keyWords}`);
      this.showSearchPane = false;
}

點擊一個熱門搜索，就把搜索的關鍵詞放到搜索列表數組searchHistorys中，然后把它存到cookie中

const SEARCH_HISTORY_KEY = '__search_history__';

 

data部分：

搜索歷史記錄從cookie中取出來

data() {
    return {
      searchValue: '',
      showSearchPane: false,
      searchHots: [],
      searchHistorys: storage.get(SEARCH_HISTORY_KEY, []),
      suggest: []
    };