目录1.实现效果2.实现原理3.实现步骤4.实现代码总结1.实现效果2.实现原理微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在loca...
目录
1.实现效果2.实现原理3.实现步骤4.实现代码总结1.实现效果
2.实现原理
微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在localStorage中即可。
wx.setStorageSync:
将数据存储在本地缓存中指定的%20key%20中。会覆盖掉原来该%20key%20对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个%20key%20允许存储的最大数据长度为%201MB，所有数据存储上限为%2010MB。%20存储的内容,只支持原生类型、Date、及能够通过jsON.stringify序列化的对象
注意：wx.setStorage是异步的，wx.setStorageSync是同步的，即要等待执行完才会去执行其他的代码
将已搜索的数据存在本js地缓存中。
wx.setStorageSync('search_history',%20JSON.stringify(this.data.list))
选择存在本地缓存中的前15条数据显示在页面中。
%20if%20(wx.getStorageSync('search_history')%20){
%20%20%20%20%20this.setData({
%20%20%20%20%20%20%20list:JSON.parse(wx.getStorageSync('search_history')%20).slice(0,%2015)
%20%20%20%20%20})
%20%20%20}
每次选择历史数据的时候，将选择的数据移到数组的第一条。
%20this.data.list.unshift(data);
点击'清空历史'按钮,wx.removeStorage清空存在本地缓存中的历史记录列表。
wx.removeStorageSync：
从本地缓存中移除指定%20key，是wx.removeStorage 的同步版本。
3.实现步骤
定义热门搜索列表，搜索历史列表，搜索名称
hot_list:['杜甫','李白','李清照','姜子牙','万事如意，心想事成'],//热门搜索
list:[],//搜索历史列表
search：%20"",//当前搜索内容
在onShow事件中，判断本地缓存是否存在key为search_history的数据，如果有就选取前15条数据
onShow:%20function%20()%20{
%20%20%20%20if%20(wx.getStorageSync('search_history')%20){
%20%20%20%20%20%20this.setData({
%20%20%20%20%20%20%20%20list:JSON.parse(wx.getStorageSync('search_history')%20).slice(0,%2015)
%20%20%20%20%20%20})
%20%20%20%20}
},
为搜索框添加bindconfirm事件,如果搜索的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前15个存进本地缓存中
%20handleInput(e)%20{
%20%20%20%20let%20data%20=%20e.detail.value.replace(/(^\s*)|(\s*$)/g,%20"");//去掉前后的空格
%20%20%20%20if%20(data.trim()%20!=%20'')%20{
%20%20%20%20%20%20this.handleData(data)
%20%20%20%20}
%20%20},
处理存入数据
%20%20handleData(e)%20{
%20%20%20%20this.data.list.forEach((item,%20index)%20=>%20{
%20%20%20%20%20%20if%20(item%20==%20e)%20{
%20%20%20%20%20%20%20%20this.data.list.splice(index,%201);
%20%20%20%20%20%20}
%20%20%20%20})
%20%20%20%20this.data.list.unshift(e);
%20%20%20%20this.setData({
%20%20%20%20%20%20list:%20this.data.list.slice(0,%2015)
%20%20%20%20})
%20%20%20%20wx.setStorageSync('search_history',%20JSON.stringify(this.data.list))
%20%20},
点击热门搜索中的数据，添加事件，如果选中的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前15个存进本地缓存中
%20%20handleIHotItem(e)%20{
%20%20%20%20let%20{%20index%20}%20=%20e.currentTarget.dataset,%20{%20hot_list%20}%20=%20this.data;
%20%20%20%20let%20search%20=%20hot_list[index]
%20%20%20%20this.setData({
%20%20%20%20%20%20search,
%20%20%20%20})
%20%20%20%20//%20将标签存到历史搜索中
%20%20%20%20this.handleData(search)
%20%20},
点击搜索历史列表中的数据，添加事件，如果选中的数据已存于历史列表中，先删除，然后unshift进数组的头部，并截取前15个存进本地缓存中
%20%20handleIHisItem(e)%20{
%20%20%20%20let%20{%20index%20}%20=%20e.currentTarget.dataset,%20{%20list%20}%20=%20this.data;
%20%20%20%20let%20search%20=%20list[index]
%20%20%20%20this.setData({
%20%20%20%20%20%20search:%20search
%20%20%20%20})
%20%20%20%20this.handleData(search)
%20%20},
点击'清空历史'按钮，添加清空事件
clearHistory()%20{
%20%20%20this.setData({
%20%20%20%20%20list:[]
%20%20%20})
%20%20%20wx.removeStorageSync('search_history')
%20},
4.实现代码
<view%20class="head%20Flex-row">
%20%20<view%20class="head_input">
%20%20%20%20<image%20src="/img/search_icon.png" class="search_icon"></image>
<input type="text" placeholder="搜索" placeholder-class="place_holder" bindconfirm="handleInput" value="{{search}}"></input>
</view>
<view class="sha_icon" catchtap="clear_input">取消</view>
</view>
<view class="con">
<view class="title">热门搜索</view>
<view class="flex-row list">
<block wx:for="{{hot_list}}" wx:key="index">
<view class="c_item color" data-index="{{index}}" catchtap="handleIHotItem">{{item}}</view>
</block>
</view>
<view wx:if="{{list.length>0}}">
<view class="flex-row j_b">
<view class="title">搜索历史</view>
<view catchtap="clearHistory" class="clear">清空历史</view>
</view>
<view class="flex-row list">
<block wx:for="{{list}}" wx:key="index">
<view class="c_item" data-index="{{index}}" catchtap="handleIHisItem">{{item}}</view>
</block>
</view>
</view>
</view>
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')
},
})
总结
到此这篇关于微信小程序实现历史搜索功能(h5同理)的文章就介绍到这了,更多相关微信小程序历史搜索功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
