小白记录，大神勿喷
今天在写微信小程序时遇到了一个功能。要求记录客户的搜索历史，以及对搜索历史的单条删除。刚开始我以为后台提供了记录用户搜索历史的接口，当我翻遍了接口文档也没找到相关的接口我才知道这个功能需要前端来完成。
刚开始我的想法很简单，创建一个数组，然后用户每次搜索完就把记录保存在数组中就可以了，很显然我的想法太幼稚了，因为每次加载页面时数组也会跟着初始化成空数组，根本不可能实现永久保存记录。这个想法被pass后我就想可不可以保存在全局变量中？用户在使用中可以正常，但是退出小程序再打开数组一样会被初始化，很显然这个想法也不可以。现在问题点就在于如何能够永久的保存用户输入的数据而不被初始化呢？这时就需要用到小程序给我们提供的一个接口把数据写在缓存中，这样只要用户不清楚手机缓存，那么这个记录就会一直存在。下面是具体的思路。
1.获取缓存
小程序给我们提供了两种方式获取缓存，一个是wx.getStorage(OBJECT)和wx.getStorageSync(KEY)。两者的区别是一个是同步获取，一个是异步获取这里不做过多的解释。
在页面初始的时候我们就要获取一次历史记录（缓存）。
onLoad：function(){
var that = this;
that.getLishi();
}
getLishi:function(){
var that = this;
wx.getStorage({
key: "lishi",
success: function (res) {
that.setData({
sercherStorage: res.data
})
}
})
},
上述代码意思就是获取缓存名字lishi的缓存数据，然后获取成功赋值给data里面的sercherStorage用来渲染页面。
2. 写入缓存
同样，小程序也给我们提供了两个方法来写入缓存一个是wx.setStorage(OBJECT)另一个是wx.setStorageSync(KEY,DATA)，区别也在于一个同步一个异步。这里有一点要值得注意的是key相同会覆盖掉原来该 key 对应的内容。所以我们不能直接用。我的思路就是，先创建一个数组保存sercherStorage的值（上一步获取用户的记录）然后每次保存的时候都往这个数组里面增加内容。然后在把这个数组写入到缓存，这样每次写入的数据都是之前的数据加上新数据一起写入了。最终在执行一次getLish（）来渲染页面
search:function(e){
// console.log(e)
var that = this;
if (e.detail.value != ""){
var array = that.data.sercherStorage;
array.push(e.detail.value)
wx.setStorageSync('lishi',array);
that.getLishi();
}
},
3删除缓存
删除缓存小程序也给出了删除方法，有兴趣的可以学习一下，这里就不介绍了，因为我们需要删除单条记录，如果清楚缓存的话那么所有的记录都会删除。所以我们还是靠数组来解决这个问题。
先创建一个数组保存sercherStorage的值，然后根据用户点击的下标来删除数组中的数据，最后在把删除完成的写入到缓存，最终渲染页面。
remove:function(e){
var that = this;
console.log(e)
var array = that.data.sercherStorage;
array.splice(e.target.dataset.item,1);
wx.setStorageSync('lishi', array);
that.getLishi();
}
})
下面是样式布局，仅供参考，大神勿喷
search.wxml
<block wx:for="{{sercherStorage}}">
<view class='hot-zuijin'>
<image src='../../images/search.png'></image>
<text>{{item}}</text>
<image src='../../images/trash.png' data-item="{{index}}" bindtap='remove'></image>
</view>
</block>
<view class='hot-clear'>
<label>清除历史纪录</label>
</view>
</view>
search.wxss
label{
padding:0 24rpx;
display: block;
font-size: 28rpx;
color: #999;
border-bottom: 2rpx solid #D4D4D4;
padding-bottom: 12rpx;
}
.hot-zuijin{
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx;
border-bottom: 2rpx solid #D4D4D4;
}
.hot-zuijin image{
width: 26.6rpx;
height: 26.6rpx;
}
.hot-zuijin text{
display: block;
flex: 1;
overflow: hidden;
margin: 0 20rpx;
}
.hot-clear{
margin-top: 24rpx;
text-align: center
}
