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

搜搜历史管理

需求：

点击搜索（添加历史）

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

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

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

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

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('清空历史成功')}
}