Vue 实现历史搜索记录

搜索 - 历史记录管理

1.搜索历史基本渲染
2.点击搜索(添加历史)
点击 搜索按钮或底下历史记录，都能进行搜索
① 若之前 没有 相同搜索关键字，则直接追加到最前面

​ ② 若之前 已有 相同搜索关键字，将该原有关键字移除，再追加

3.清空历史:添加清空图标，可以清空历史记录

搜索 - 历史记录 - 基本管理

  1. data 中提供数据，和搜索框双向绑定 (实时获取用户内容)
1
2
3
4
5
6
7
8
9
10
11
data () {
  return {
    search: ''
  }
}

<van-search v-model="search" show-action placeholder="请输入搜索关键词" clearable>
  <template #action>
    <div>搜索</div>
  </template>
</van-search>
  1. 准备假数据，进行基本的历史纪录渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
data () {
  return {
    ...
    history: ['手机', '空调', '白酒', '电视']
  }
},
    
<div class="search-history" v-if="history.length > 0">
  ...
  <div class="list">
    <div v-for="item in history" :key="item" @click="goSearch(item)" class="list-item">
      {{ item }}
    </div>
  </div>
</div>
  1. 点击搜索，或者下面搜索历史按钮，都要进行搜索历史记录更新 (去重，新搜索的内容置顶)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div @click="goSearch(search)">搜索</div>

<div class="list">
  <div v-for="item in history" :key="item" @click="goSearch(item)" class="list-item">
    {{ item }}
  </div>
</div>

goSearch (key) {
  const index = this.history.indexOf(key)
  if (index !== -1) {
    this.history.splice(index, 1)
  }
  this.history.unshift(key)
  this.$router.push(`/searchlist?search=${key}`)
}
  1. 清空历史
1
2
3
4
5
<van-icon @click="clear" name="delete-o" size="16" />

clear () {
  this.history = []
}

搜索 - 历史记录 - 持久化

  1. 持久化到本地 - 封装方法
1
2
3
4
5
6
7
8
9
10
11
12
const HISTORY_KEY = 'hm_history_list'

// 获取搜索历史
export const getHistoryList = () => {
  const result = localStorage.getItem(HISTORY_KEY)
  return result ? JSON.parse(result) : []
}

// 设置搜索历史
export const setHistoryList = (arr) => {
  localStorage.setItem(HISTORY_KEY, JSON.stringify(arr))
}
  1. 页面中调用 - 实现持久化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data () {
  return {
    search: '',
    history: getHistoryList()
  }
},
methods: {
  goSearch (key) {
    ...
    setHistoryList(this.history)
    this.$router.push(`/searchlist?search=${key}`)
  },
  clear () {
    this.history = []
    setHistoryList([])
    this.$toast.success('清空历史成功')
  }
}