Vue 搜索历史管理-本地持久化管理

搜搜历史管理

需求：

1. 点击搜索（添加历史）

​
点击 搜索按钮后 或者 底下历史记录，都能进行搜索（相当于跳转到搜索的列表组件）

​ ① 若之前 没有 相同的搜索关键字，则在搜素历史的最前面直接添加

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

---

2. 清空历史：点击清空图标，可以清空历史记录
3. 持久化： 搜素历史需要持久化，刷新历史不会丢失

1. data 中提供数据，和搜索框双向绑定 (实时获取用户内容)

data () {
  return {
    search: ''
  }
}

<van-search v-model="search" show-action placeholder="请输入搜索关键词" clearable>
  <template #action>
    <div>搜索</div>
  </template>
</van-search>

2. 准备假数据，进行基本的历史纪录渲染

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>

3. 点击搜索，或者下面搜索历史按钮，都要进行搜索历史记录更新 (去重，新搜索的内容置顶)

<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) {
  if (this.search === '') {
      return
}
  const index = this.history.indexOf(key)
  if (index !== -1) {
    this.history.splice(index, 1)
  }
  this.history.unshift(key)
  this.$router.push(`/searchlist?search=${key}`)
}

4. 清空历史

<van-icon @click="clear" name="delete-o" size="16" />

clear () {
  this.history = []
  this.search = ''
}

持久化管理

1. 持久化到本地 - 封装方法

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))
}

2. 页面中调用 - 实现持久化

data () {
  return {
    search: '',
    history: getHistoryList()
  }
},
methods: {
  goSearch (key) {
    ...
    setHistoryList(this.history)
    this.$router.push(`/searchlist?search=${key}`)
  },
  clear () {
    this.history = []
    setHistoryList([])
    this.$toast.success('清空历史成功')
  }
}