小程序中搜索历史记录的相关方法

1. 搜索记录的翻转

说明：最新搜索的关键字在最前面

history:[] // 保存搜索关键字

computed:{
 reverseHistory(){
  // 将history数据解构赋值给新的数组,在新的数组上进行翻转,因为reverse()方法会修改history数组
  return [...this.history].reverse()
 }
}

2. 搜索记录的去重

说明：当搜索的关键字重复后,将此关键字展示在最前面

saveHistory(){
 // 关键字去重
 // 创建set对象,保存搜索关键字
 const set = new Set(this.history)
 // 当输入的关键字有重复时,删除已存在的关键字
 set.delete(this.kw)
 // 将新搜索的关键字添加到set对象
 set.add(this.kw)
 // Array.from() 将对象转化成数组
 this.history = Array.from(set)
}

3. 搜索记录的永久保存

history:uni.getStorageSync('history') || '[]',// 搜索关键字

saveHistory(){
 // 关键字去重
 // 创建set对象,保存搜索关键字
 const set = new Set(this.history)
 // 当输入的关键字有重复时,删除已存在的关键字
 set.delete(this.kw)
 // 将新搜索的关键字添加到set对象
 set.add(this.kw)
 // Array.from() 将对象转化成数组
 this.history = Array.from(set)
 // 持久化存储			
 uni.setStorageSync('history',JSON.stringify(this.history))
}

4. 清空搜索记录

removeHistory(){
 // 询问用户是否清空
 uni.showModal({
  title:'提示',
  content:'是否清空历史搜素记录？',
  success: e => {
   if(e.confirm){
    // 清空
    this.history = []
    // 持久化存储							    
    uni.setStorageSync('history',JSON.stringify(this.history))
   }
  }
 })
}