uniapp-历史搜索记录

应用场景

很多搜索场景内都能用到这个功能

大概就是用户搜索了某个关键字 然后搜索的关键字可以持久的保存下来

下次打开搜索的时候可以达到快速点击搜索的效果

实现步骤

1. 先给输入框双向绑定数据和事件

<input v-model="keyWord">

2. 给搜索按钮绑定点击事件

<button @click="search">搜索</button>

3. 在事件内去处理相关逻辑

methods: {
	search(){
    // historyList 为历史搜索的列表
    // 先做逻辑判断 keyWord 在history内是否存在 如果存在 就把原来的删除 把最新的添加到最前面
    // 如果不存在 就直接加到最前面
    this.historyList.unshift（this.keyWord）
    this.keyWord = ''
    // 把列表储存到本地
    uni.setStorageSync('historyList', this.historyList)
  }
}

4. 在页面加载的时候就从本地获取列表

onLoad(){
  this.historyList = uni.getStorageSync('historyList')
}

5. 把列表循环渲染到对应的位置