微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在localStorage中即可。
将数据存储在本地缓存中指定的 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清空存在本地缓存中的历史记录列表。
从本地缓存中移除指定 key，是wx.removeStorage 的同步版本。
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)
},clearHistory() {
this.setData({
list:[]
})
wx.removeStorageSync('search_history')
},<view class="head flex-row">
<view class="head_input">
<image src="/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')
},
})
