微信小程序实现历史搜索功能的全过程(h5同理)

最近在使用微信小程序开发的时候遇到了一个需求,需要实现历史搜索记录的功能,所以下面这篇文章主要给大家介绍了关于微信小程序实现历史搜索功能(h5同理)的相关资料,需要的朋友可以参考下

1.实现效果

2.实现原理

微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在localStorage中即可。

wx.setStorageSync:
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。存储的内容,只支持原生类型、Date、及能够通过JSON.stringify序列化的对象

注意：wx.setStorage是异步的，wx.setStorageSync是同步的，即要等待执行完才会去执行其他的代码

将已搜索的数据存在本地缓存中。

wx.setStorageSync('search_history', JSON.stringify(this.data.list))

选择存在本地缓存中的前15条数据显示在页面中。

 if (wx.getStorageSync('search_history') ){ this.setData({ list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15) }) }

每次选择历史数据的时候，将选择的数据移到数组的第一条。

 this.data.list.unshift(data);

点击'清空历史'按钮,wx.removeStorage清空存在本地缓存中的历史记录列表。

wx.removeStorageSync：
从本地缓存中移除指定 key，是wx.removeStorage 的同步版本。

3.实现步骤

定义热门搜索列表，搜索历史列表，搜索名称

hot_list:['杜甫','李白','李清照','姜子牙','万事如意，心想事成'],//热门搜索 list:[],//搜索历史列表 search： "",//当前搜索内容

在onShow事件中，判断本地缓存是否存在key为search_history的数据，如果有就选取前15条数据

onShow: function () { if (wx.getStorageSync('search_history') ){ this.setData({ list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15) }) } },

为搜索框添加bindconfirm事件,如果搜索的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前15个存进本地缓存中

 handleInput(e) { let data = e.detail.value.replace(/(^\s*)|(\s*$)/g, "");//去掉前后的空格 if (data.trim() != '') { this.handleData(data) } },

处理存入数据

  handleData(e) { this.data.list.forEach((item, index) => { if (item == e) { this.data.list.splice(index, 1); } }) this.data.list.unshift(e); this.setData({ list: this.data.list.slice(0, 15) }) wx.setStorageSync('search_history', JSON.stringify(this.data.list)) },

点击热门搜索中的数据，添加事件，如果选中的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前15个存进本地缓存中

  handleIHotItem(e) { let { index } = e.currentTarget.dataset, { hot_list } = this.data; let search = hot_list[index] this.setData({ search, }) // 将标签存到历史搜索中 this.handleData(search) },

点击搜索历史列表中的数据，添加事件，如果选中的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前15个存进本地缓存中

  handleIHisItem(e) { let { index } = e.currentTarget.dataset, { list } = this.data; let search = list[index] this.setData({ search: search }) this.handleData(search) },

点击'清空历史'按钮，添加清空事件

clearHistory() { this.setData({ list:[] }) wx.removeStorageSync('search_history') },

4.实现代码

  取消 热门搜索  {{item}}  搜索历史清空历史  {{item}}

Page({ data: { hot_list: ['杜甫', '李白', '李清照', '姜子牙', '万事如意，心想事成'], list: [], search: "",//当前搜索内容 }, onShow: function () { if (wx.getStorageSync('search_history')) { this.setData({ list: JSON.parse(wx.getStorageSync('search_history')).slice(0, 15) }) } }, handleInput(e) { let data = e.detail.value.replace(/(^\s*)|(\s*$)/g, "");//去掉前后的空格 if (data.trim() != '') { this.handleData(data) } }, handleData(e) { this.data.list.forEach((item, index) => { if (item == e) { this.data.list.splice(index, 1); } }) this.data.list.unshift(e); this.setData({ list: this.data.list.slice(0, 15) }) wx.setStorageSync('search_history', JSON.stringify(this.data.list)) }, handleIHotItem(e) { let { index } = e.currentTarget.dataset, { hot_list } = this.data; let search = hot_list[index] this.setData({ search, }) // 将标签存到历史搜索中 this.handleData(search) }, handleIHisItem(e) { let { index } = e.currentTarget.dataset, { list } = this.data; let search = list[index] this.setData({ search: search }) this.handleData(search) }, // 清空输入文字 clear_input() { this.setData({ search: '' }) }, //清空历史 clearHistory() { this.setData({ list: [] }) wx.removeStorageSync('search_history') }, })