微信小程序——搜索历史记录的优化

目录

前言

问题1：最新的搜索记录历史记录排在最后而不是第一个

问题1的优化：

将puch()改为unshift()方法

在不更改push()方法的情况下，新增一个计算属性，使用reverse()方法反转数组

问题2：搜索历史中搜索词重复出现

问题2的优化：

将数组转化为set对象，调用set中的方法

问题3：页面刷新搜索历史记录丢失

问题3的优化：

调用uni.setStorageSync(key,value）将搜索历史记录存储在本地

---

前言

在很多项目中，我们经常会有搜索框，而这里我们要说的是关于搜索完历史记录的处理。

问题1：最新的搜索记录历史记录排在最后而不是第一个

问题1的优化：

出现这种问题一般都是直接调用了push()方法

优化有以下方案：

• 将puch()改为unshift()方法

• 在不更改push()方法的情况下，新增一个计算属性，使用reverse()方法反转数组

调用reverse()方法会反转数组从而可以将最后一个元素放在第一个展示，但是会改变原数组元素顺序，所以这里新增一个计算属性，然后新建一个内存无关的数组进行反转

然后将修改循环的数组对象修改为新增的计算属性

从而完成了在不改变push()方法且不改变原数组顺序的情况下将最新的搜索历史记录放在了最前面

问题2：搜索历史中搜索词重复出现

问题2的优化：

将数组转化为set对象，调用set中的方法

在Set对象中只允许存在任何类型的唯一值

使用方法如下

先将原数组转化为set对象，然后当搜索时，调用set对象中的delete方法，在set对象中删除搜索时出现关键词，有就删，没有就通过add方法向set对象中去添加搜索的关键词，最后将set对象转化为数组

问题3：页面刷新搜索历史记录丢失

问题3的优化：

调用uni.setStorageSync(key,value）将搜索历史记录存储在本地

用JSON.stringify()将数组转化为字符串存储在本地

并在小程序的生命周期函数onload中调用getStorageSync，也就是页面一打开时调用本地存储

同样，在调用本地存储时，使用JSON.parse()将字符串转为数组

常见的搜索历史优化问题解决方案大抵就这样了，感谢观看.如有收获，三连博主啊