1.在searchResult頁面存取

// 將搜尋關鍵字設定到快取中
saveHisByLocal(keyword) {
  // 判斷搜尋記錄是否存在，如果存在，不需要存
  this.searchShopsHis.forEach((item, index) => {
    if(item == keyword) {
      return false;
    }
  })

2.記錄長度為5

 if(this.searchShopsHis.length >= 5) {
    this.searchShopsHis.pop();
  }
  // 將搜尋的記錄儲存到第一位
  this.searchShopsHis.unshift(keyword)
 
  // 儲存到localStorage
  localStorage.searchShopsHis = JSON.stringify(this.searchShopsHis);
},

3.在searchResult頁面取快取記錄

getHisByLocal() {
  // 從快取獲取搜尋記錄
  let searchShopsHis = localStorage.searchShopsHis;
  if(searchShopsHis) {
    this.searchShopsHis = JSON.parse(searchShopsHis);
  }
},

4.在searchResult的mounted中呼叫取出快取

this.getHisByLocal();

5.在search頁面取

mounted() {
  // 進入頁面獲取搜尋記錄
  this.getHisByLocal();
},
methods: {
  getHisByLocal() {
    // 從快取獲取搜尋記錄
    let searchShopsHis = localStorage.searchShopsHis;
    if(searchShopsHis) {
      this.searchShopsHis = JSON.parse(searchShopsHis);
    }
  },

6.在searchResult頁面渲染

<span v-for="(item, index) in searchShopsHis" :key="index">{{item}}</span>