高效管理搜索历史：Vue持久化实践

西洼工作室2025-11-04 21:29

搜索－历史记录管理

需求：

1.搜索历史基本渲染

2.点击搜索(添加历史）

点击搜索按钮或底下历史记录，都能进行搜索

①若之前没有相同搜索关键字，则直接追加到最前面

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

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

4.持久化：搜索历史需要持久化，刷新历史不丢失

src\utils\storage.js

js 复制代码

const HISTORY_KEY = 'hm_shopping_history'

export const getHistoryList = () => {
  const result = window.localStorage.getItem(HISTORY_KEY)
  return result ? JSON.parse(result) : []
}

export const setHistoryList = (arr) => {
  window.localStorage.setItem(HISTORY_KEY, JSON.stringify(arr))
}

src\views\search\index.vue

js 复制代码

import { getHistoryList, setHistoryList } from '@/utils/storage'
export default {
  name: 'SearchIndex',
  data() {
    return {
      search: '',
      history: getHistoryList()
    }
  },
  methods: {
    goSearch(key) {
      const index = this.history.indexOf(key)
      if (index !== -1) {
        this.history.splice(index, 1)
        this.history.push(key)
      } else {
        this.history.unshift(key)
      }

      // 限制历史记录数量（可选）
      if (this.history.length > 10) {
        this.history = this.history.slice(0, 10)
      }

      // 持久化
      setHistoryList(this.history)
      // 跳转到搜索列表页
      this.$router.push(`/searchlist?search=${key}`)
    },
    clearHistory() {
      this.history = []
      setHistoryList([])
    }
  }
}